I have an issue on this page when I open it on iPad. Crimson colored top identification header goes to left and then on the right side you can see a blank space. All other major browsers including Safari shows the page as it should be except iPad. Here's the screen shot from iPad view. Any ideas whats wrong with it?
First off, it looks like you have the university logo in the upper left set as both a background image and a regular image within the <a>. Removing the regular image fixes the problem seen in both your iPad screenshot and in my desktop browser where the logo is cut off on the left and "ity" repeats in "University".
I don't have an ipad in front of me, but it's possible that might fix the problem with the right space as well. You might want to consider adding a margin-right to the form in the header so the "Go" button isn't right up against the edge of the window at 1024px resolution.
The content in your #signature div is bigger than your #signature div, so the background isn't stretching to fit the content (you can get the same reaction by shrinking the size of your window and scrolling to the left or right).
Fixes:
Remove left: -5px; from #signature a.iu
Add background: #7D110C to #signature
Change right: 0 on #signature form to right: 5px.
That should straighten things up.
EDIT
Here's what your updated styles should look like.
#identity #signature {
height: 44px;
margin: 0 auto;
position: relative;
text-align: left;
width: 990px;
background: #7D110C;
}
#identity #signature a.iu {
background: url(pw_files/img/iu_crimson.gif) no-repeat 20px 0;
display: block;
height: 44px;
position: relative;
top: 0;
width: 250px;
}
#identity form {
height: 44px;
position: absolute;
right: 5px;
top: 0;
}
I pulled these styles out of screen.css
Related
I'm attempting to help a friend with her site jessheading.com
She's using a WordPress theme and the WP Touch mobile plugin. But when someone clicks to view the full-site version on mobile, the orange box with the quote part way down the page runs off to the side when you zoom out (creating a sort of side-scroll).
The CSS on that box is:
.pull-quote {
background: #fb8063;
width: 300%;
margin: 30px 0 30px -100%;
z-index: 70;
position: relative;
}
How can I fix the CSS or the viewport settings to prevent zooming out so far so that that orange box overflows to the right?
Parent of the box:
{
overflow-y: auto
}
.pull-quote {
background: #fb8063;
width: 300%;
margin: 30px 0 30px -100%;
z-index: 70;
position: relative;
overflow: hidden;
}
this merely clips overflow, and the rest of the content will be invisible
some other things to consider is to resize the whole orange box as well as the tags with it.
other overflow css you can try are: scroll, auto, etc.
quite possibly even set the width of the orange box to be fixed and display it within a div tag that has a background of orange.
hope this helps
I have the following example for an off-canvas menu: http://jsfiddle.net/pwghdvoh/
When you click the button in the top left of the blue header, it moves the main app view to reveal the hidden menu.
It does this using the following CSS:
.showSidebar .app
{
-webkit-transform: translateZ(-20px)
translateX(240px);
transform: translateZ(-20px)
translateX(240px);
}
However I'm finding that on various resolutions that the app is not moved 240px to the right and 20px offset from the the top and bottom... If you look at the screenshot, you can see that it's too close to the top and bottom of the screen, it should have 20px at the top and bottom.
Could this be caused by the perspective of the wrapper being incorrect?
I do this dynamically using jQuery:
$('.wrapper').css({
'perspective': $(window).width(),
'-webkit-perspective': $(window).width()
});
So it's always the perspective of the viewport width. But this doesn't seem to fix the issue.
Any ideas?
Instead of giving width: 100% and height: 100% to the .wrapper class, I added position absolute and stretched it to its parent container which is body element. and when the side bar is viewed, I gave the top and bottom properties as 20px which overrides the already provided 0px value.
.wrapper {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.wrapper.showSidebar {
top: 20px;
bottom: 20px;
}
Working Fiddle
I have a problem of howto remove the white space caused on the bottom of the page - when i remove the gear image it works fine.
html, body{
height: 100%;
width: 100%;
font-size:10pt;
}
.footer_fg{
float: left;
position: relative;
width:455px;
height:358px;
background: url('/include/images/Final-Website2_11a.png') no-repeat 0 0;
top: -150px;
border:0;
}
this is the CSS for the site.
Using position: relative it is not the same as margin-top. position:relative first places the item on it's original position (and messures the size of the parent element with this position) and then just moves it. So there will always be white space where this item was before. If you just want to move it without leaving this white space you should think about using margin-top: -150px instead. As we don't see the rest of your code it is hard to tell if this would work for your site.
I have padding to the right of my archives and search page and I believe it has to do with my body element, however I'm not quite sure what is different on these pages are from the other pages on the site of which are all fine for style wise as they all use the same format. It's a wordpress website. As I said, it's only happening to this page and the search page and all others are fine, so I'm confused as to what it's doing.
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; }
body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;}
header { width: 960px; height: auto; margin: 0 auto; display: block;}
#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}
aside { width: 260px; height: auto; float: left; position: relative;}
#main { width: 650px; height: auto; float: right; position: relative;}
#footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; }
If you decrease the size of your window you'll notice that a scroll bar on the bottom of the page shows up and then the padding on the right starts to take shape. If you make your window larger that padding space is then gone and the scroll bar on the bottom disappears. Have I restricted my body tag in any way to have this happen?
I've looked through this one but I already have a min-width defined.
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
In your style.css file at Line 108, remove the width attribute from the header tag to fix your horizontal scrollbar issue.
Fixed CSS:
header { height: auto; margin: 0 auto; display: block;}
For review, 3D View in Firefox browser shows the header as the gray bar with is the root of your problem. The other styles that create the text are not affected.
Tip: Right mouse-click the above image and view in new tab to see in original size.
Ah, if I'm understanding your problem correctly, it appears that the tag header, specifically its style width: 960px, is what is causing this peculiar occurrence. The containing div around the header, #main, only has width: 650px. As a result, the excess width of the header causes it to extend beyond the edge of the div.
The reason why it seems to be appearing as padding only at smaller screen widths is because the containing div around all that, #container, is centered by its margins - so the effects of the over-wide header won't become apparent until the browser is thin enough such that its right edge begins to overlap the right side of the header.
Rather than fixing this by just dropping the width: 960px from the styles of the header (which may mess up the site where this width for header tags is actually needed), I would suggest adding an overriding class to all offending tags, perhaps on the lines of .archive-header { width: auto; }. But I guess the solution is up to you, since you probably know the site better than I do.
I hope this helps! (I really do, otherwise you'd have read all this for nothing! Sorry if you did...) For the future, try downloading Firebug for Mozilla Firefox, which has a handy element inspector which will let you play around with the styles of elements to see what works. It should help you spot these kinds of issues on your own, so you can fix them quicker.
I have simple login box, which is centered to the middle of page (vertical and horizontaly).
Here you can find DEMO for it:
http://encodable.com/uploaddemo/files/login.html
Problem is that everytime I resize browser window manually the content of div (#login-logout-box) is being resized, if someone is trying to view this login form in browser window, which height is lower then 380px, it should add scrollbars to the page. But atm instead of that box is just cutten off. Means that under low resolution this form is partically shown without ability to scroll :S (tryed several phones - Iphone and Android 2.3)
But again I don't want that div to be scrollable but whole page.
I've checked www and stackoverflow for possible answer, but nothing at all, also I'm sorry if question is unclear, I've tryed my best to describe it.
Your code should not be working in any browser at all. As per the W3C Spec, "Boxes with fixed position that are larger than the page area are clipped."
Simply change position: fixed; to position: absolute;
#login-loguout-box {
width: 380px;
height: 380px;
position: absolute;
top: 45%;
left: 50%;
margin-left: -190px;
margin-top: -190px;
margin-bottom: 20px;
border: 2px solid #cacaca;
}
Working Code
Full Screen Demo
Use the overflow setting in css, e.g.
overflow-x: auto; /* for horizontal scrolling*/
overflow-y: auto; /* for vertical scrolling */