I can't, for the life of me, work out why there's a fat white line down the right hand side of my page in ie7. Especially as the background isn't even white. I want to be rid of it.
Here's a link and screenshot.
screenshot not yet allowed
The bar disappears with #content{display:none} . I'd appreciate help with a solution that doesn't involve getting rid of everything! Thank you (first question)
Your ieglobal.css is handing a width of 923px to your HTML tag which is pushing your page to the left. Remove that and it should center properly and remove that white piece that you are seeing (which is also being added by the same CSS sheet as a background, url(../img/iestrip.png); OVERFLOW-X: hidden).
Related
This is one that absolutely confounds me. I have a site that uses a full-screen "splash screen", which the user then slides away to reveal the content beneath. In Chrome and Firefox, everything displays properly, but on Safari (both mobile and desktop), the div is split down the middle, the left half of the div is transparent (showing through to the content beneath) and only the right half is visible. All the content within it is still positioned as if it were full-screen, but it's all abruptly cut off halfway cross the screen, right down the middle of an image and a block of text. After several days rifling through the inspector I can't find any reason why Safari would be exhibiting this truly bizarre behavior—the split doesn't seem to follow any existing borders or boundaries of any elements, the inspector is acting as if the entire div is visible.
The only thing I can think of is: This issue seems to have appeared around the same time as I introduced some schmancy transform3d effects on the body, is Safari known for being unable to properly handle transform3d effects?
Since I have no idea which section of code could be causing this glitch, I'm not sure what code I would paste here, but the website is http://vanderstank.church. I apologize again for the broadness of this question, but I am unable to narrow it down any further. Thanks for any light you may be able to shed on this situation.
Solved this myself - it was related to the 3D rotation I added. Turns out I had applied the rotateY(6deg) effect not only to body but also to the #front div. I couldn't get that #front rotation to actually work right, so I'd given up on it... but forgotten to delete the line.
But because #front had a rotateY(6deg) on it while on the same plane/axis as body, it rendered as if the right half of it was "in front of" the body but the left half was "behind" the body. Still not sure why this only happened in Safari.
Remember to delete or comment out old code, guys!
I've got this weird problem which it seems that i simply can't solve (so far). The weird thing is that I've done almost exactly the same layout before for a navigation-bar, which was succesful.
In my navigation bar i have a button (not an actual <button> but a <div> which acts like one through jquery) to the farthest right of it, which has a background color and expands on click. The problem is that in IE and some resolutions of Chrome as well, there's a little white stripe shown beneath this div. Further this makes the child div that expands beneath it have a little gap between the button in the navigation bar and it self. This might not matter to some people (or most), but it's driving me mad - especially considering that i've done it before and used almost the very same css.
The <div> (to be more precise, it's the "quick-download" div) is set to a height of 70px and line-height of 70px, and the same goes for its siblings (and some of them less). However, the parent div shows up as 70.4px in height, which is bugging me out. I've tried numerous "trial-and-error" solutions/attempts, but with no success at all.
EDIT:
An image of the problem can be seen here (i changed background to red to make it more apparent): http://imgur.com/fya0duQ
EDIT 2:
The white space beneath the quick-download div appears only to be showing in IE and Safari on my compute right now.
EDIT 3:
Link to website is removed as the problem is corrected and therefore no longer is useful.
Assuming you mean the "Quick Download" button...
The height of the navigation bar is 75px and the height of the button is 70px, creating a 5px-tall gap.
The reason your navigation bar is 75px is because your image on the left is 60px tall with margin-top: 15px;. If you want the button to be flush with the bottom of the navigation bar, you can either increase the height of the button, reduce the margin-top of the <img id="aktie-skat-logo" ...>, or reduce the image's height.
The CSS in question:
#aktie-skat-logo {
margin-top: 15px;
display: block;
}
I've actually tracked the problem down my self - however, only after checking the problem across different browsers, after posting in here. The hint came in my old version of safari and IE, and didn't show in Chrome - which is consistent with "EDIT 2" in the original post. I found that some links we're 0.4px higher than others, but only 2/5 links.
The problem apparently stems from inserting a FontAwesome icon using the css ::after selector to links that has "children" (subpages). After removing this or making these icons position:absolute the problem is solved.
As to why insering these using ::after I have no idea. The ::after element had display:inline so shouldn't have broken too much in my opinion.
I'm sorry that I might have wasted your time checking my problem and answering, but even though I found the solution my self, it was a help posting in here (wouldn't have found it otherwise). I hope this might help some other people at some point.
The picture shows the problem area I have with my website. That little black line protrudes out from behind my dropdown menu and in Firefox the word resources will appear underneath home, but it IE and Chrome the menu looks as it should, except for that little black line that sticks out. The template I'm using is a modified Dreamweaver template. It didn't used to do this, but I breaked it :/
edit: all fixed.
You need to clear your floats.
If you add overflow: hidden to your top menu UL and the sidebar div, you will notice the HR moves down.
Edit
Just an FYI, there is probably a better way to clear your floats then just adding overflow: hidden everywhere like I showed in this answer. It really depends on how you are laying out the page, and I don't know what your plans are. Therefore, here are some links below that explain what floats are, how they work, and how to clear them, which should give you a better understanding.
http://www.quirksmode.org/css/clearing.html
http://css-tricks.com/all-about-floats/
I have two problems with my website : http://test2.tamarawobben.nl
Problem 1 : In IE9 the header is placed well but the text area is at the wrong place.
Problem 2 : An area around the header stays white but it supposes to be shown the background.
Anyone a tip how to solve these two anoying problems?
Roelof
Edit 1 : Sorry, the wrong url. I will change it now.
Concerning the first problem, it's is not very clear what it is that it's not ok.
I guess the search field is supposed stick to the top of the page. Right now it looks like the body has a margin-top or a padding.
Actually looking at the markup, there is a textnode right after the body which adds the space at the top:
Remove it and the "sort-of" margin will go away.
Concerning the white background, you are using a GIF that has a white background! It won't magically dissapear. You have several choices:
change the image format to PNG and set the white to transparent
have separate images for the different parts (the search and the top of main content zone)
set the white color to transparent in the GIF (really not a good solution)
I also noticed that your <meta>, <title>... tags should be in the HEAD and not in the BODY !
I have been pulling my hair out on this one all day, and I'm hoping someone smarter than me can figure it out.
I'm working on a new design for my site, and I've run into what appears to be a Firefox bug. I am using background-attachment: fixed for a gradient on the <body> element and then I have a full width <div> with another background image at the top of the page. Only in Firefox, there is a small white border at the top of the page and on either side of the <div> background.
I've tried at least a half-dozen different ways of coding the HTML and CSS, and they all produce the same results. Also, the white gap doesn't appear to be there in earlier versions of Firefox (I noticed it in version 6). I even did a clean reinstall of Firefox without any add-ons, and I'm still seeing it. Any ideas on what's causing this? Is my code wrong in some way?
See simplified test case here: http://mygemologist.com/bg-fixed-test.html
Note: This question may be related to: Crazy CSS Issue in Firefox Only - position fixed and background color, but I'm not sure on that.
Dominic, see https://bugzilla.mozilla.org/show_bug.cgi?id=677095 for this issue and https://bugzilla.mozilla.org/show_bug.cgi?id=677095#c47 for a possible workaround.
Maybe use a smaller width image? It seems firefox has issues rendering it, when zooming it goes from properly displayed to having a 1-2px white border above it.
EDIT
When I change the body css to background-position: scroll the problem seems to go away
body {
background: url("http://www.mygemologist.com/resources/bg-gradient.jpg") repeat-x scroll left top transparent;
}