CSS margin-top not working Firefox
Violet_82 8910 Years Ago Hi guys, and here is the page I am working on: Web editing in Richmond
Here's the issue: because I want some space between the left corner of my page and the top navigation but in firefox there is more space then IE7 I gave 1em to the bottom margin because I wanted some space between the horizontal navigation and the horizontal line, but again it is rendered differently in Firefox and IE7, the latter displaying more space than the former. I am not quite sure what I am doing wrong... web-design 0 Votes Up 0 Votes Down screesnshot.doc (159 KB) Recommended Answers
ikunu 010 Years Ago Hey just put this code at the top of page and this may help you get it done "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago Ikunu, 0 Votes Up 0 Votes Down shaya4207 810 Years Ago I think that you should rather have your margins in 'px', since 'em' represents the size of the letter 'M', and different browsers have different font sizes... 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago Hi there, However, I solved one of the above problems, the space between the left corner and the top navigation. the code I had was #topnav ul { list-style: none; margin-left:10px; }but apparently firefox and chrome adds some extra padding (!!??), so I added this line padding-left:10px;to make it even and now it works! yay! Unfortunately I couldn't solve the other problem (the space between the horizontal navigation and the horizontal line). I applied pretty much the same logic even if this time IE7 seems to add some extra space between the two. I tried to even up the space removing any possible extra margin or padding and some extra modifications ending up with this /*This is the top navigation */ #topnav ul { list-style: none; margin-left:10px; /*to have some space on the left of the top navigation, but it is rendered differently in IE and firefox */ padding-left:10px; /*the above problem is resolved adding the padding. Firefox and chrome seem to add some extra padding on their own */ margin-bottom:0; padding-bottom:0; } #topnav li { float: left; margin-top:1em; margin-right:1.5em; margin-bottom:0; margin-left:0; /*bottom margin is because I want some space between the top navigation and the horizontal line but it is rendered differently in IE and firefox */ padding-bottom:0; font-family: Arial, Verdana, sans-serif; } body { background-color:#E6E6DC; } /* Horizontal line */ #horizontal_line { clear:both; color:#81a594; background-color:#81a594; height:0.35em; width:65%; float:left; padding-top:0; margin-top:0; border-style:none; /*Firefox seems to have a little border, so I removed it altogether */ }but no joy...there is always more space between the horizontal navigation and the horizontal line in IE7 than in firefox and chrome 0 Votes Up 0 Votes Down shaya4207 810 Years Ago Did you take of the 'margin-bottom'? I don't see it at all? 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago I did yes, it's in line 18 of the css. I gave it 0 now because I was trying to determine how much more space IE7 gives it to the gap between the line and the navigation. I can give it any value really, still IE7 adds that little annoying bit. 0 Votes Up 0 Votes Down shaya4207 810 Years Ago Welcome to the crazy world of IE... Unfortunately the only way you may be able to fix this is with a hack :( 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago I see, so what would you recommend then? 0 Votes Up 0 Votes Down shaya4207 810 Years Ago I don't recommend this, but in some cases it's just necessary... and put in there the styling you want for IE7 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago I see, that makes sense, and does it need to go before or after the main CSS? in line 38, so if it doesn't float when I gave it that value, how do I make it float it left? I thought of "align" but that doesn't work either... 0 Votes Up 0 Votes Down shaya4207 810 Years Ago Put it after the regular CSS, and regarding the margin, try a negative margin (-)... 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago Negative? Ok cool, will definitely try that and then post back, thanks, didn't know I could use negative values 0 Votes Up 0 Votes Down ikunu 010 Years Ago Hi Violet 82 fix by Shaya4207 can work for you because IE have a different way of dealing with HTML CSS and in that regard just let it do something forcefully will get the job done 0 Votes Up 0 Votes Down Arkinder 9310 Years Ago By default, each browser has its own margin and padding for elements. To "reset" this simply add a universal rule (*) in your CSS. * { margin: 0; padding: 0; }As for the doctype I'm going to quote a mentor of mine, "The doctype is the set of rules you are telling the browser you are using to create the page. Change the doctype, change the rules."
0 Votes Up 0 Votes Down MidiMagic 57910 Years Ago IE applies the width setting outside the margins, borders, and padding. The W3C standard, Firefox, and others apply the width setting inside them. 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago Thanks guys. then how do I play with margins and paddings? If I set them to 0 then I won't be able to say something like in the code? MidiMagic, if different browsers then apply different settings, the only way to get around will be, as I was suggested, to use a different stylesheet for IE then. Like the problem I am having with the horizontal line that is not centred in IE but it is in firefox et al 0 Votes Up 0 Votes Down teedoff 310 Years Ago No add * { } at the TOP of your css. Then you set margins and paddings for each element you want to have them. Ths global margin and padding rule is simply to set them to 0 or nothing, like a clean slate, so that all browsers start at the same place. 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago Ok thanks for that, it really makes the difference actually and sorts most of my problems out :) . 0 Votes Up 0 Votes Down teedoff 310 Years Ago I might have missed it, but do you have a link to your site? Sure would be much easier to see you issues live. One thing I will mention, and I'm just guessing, is that you created a div for a horizontal line correct? Why didn't you just insert a horizontal line and style the line itself. Not that it wouldnt work that way, just overkill. 0 Votes Up 0 Votes Down floatingDivs 2110 Years Ago Hi Violet82, I skimmed over the thread and tested out the HTML/CSS in the first post. It works fine in IE8 and Firefox. I realize the problem is IE7, but without sounding like a wise-ass, it should unless you're doing something wrong. At my job, we recently created a calendar solution using floats throughout the page with NO problems, tested in 100's of department skins. What I'd suggest is NOT fun, but it will pretty much guarantee you'll figure out your trouble-spot. What you think is the issue may not actually be the issue. Also, is there any way you could upload the site to a public server? 0 Votes Up 0 Votes Down Arkinder 9310 Years Ago Please keep in mind that floating an element removes it from the normal flow of the page. Regards, Arkinder 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago Hi there,
teedoff, The line is not in a div
floatingDivs, What would you propose?
Arkinder, what do you mean exactly? 0 Votes Up 0 Votes Down sagive 2410 Years Ago you need to determine height for that div you can either do: that should fix it.. 0 Votes Up 0 Votes Down Arkinder 9310 Years Ago Check this out. Regards, Arkinder 0 Votes Up 0 Votes Down floatingDivs 2110 Years Ago Violet82, My apologies. I can't believe I forgot to include the suggestion for which I included a warning. *facepalm* The suggestion would be to restart the page from scratch and add little by little and test it various browsers. Find the EXACT html code that causes the problem. Just because one thing LOOKS like the problem does not mean it is. Once again, sorry! Hopefully, Daniweb helps you get your answer. 0 Votes Up 0 Votes Down Arkinder 9310 Years Ago The problem is only occurring in IE7. Modern browsers have no problem with it, so it's doubtful that there is anything actually wrong with the code. Taking apart the site would be pointless, not to mention a huge waste of time for a problem that's exclusive to a browser that's known for its many flaws. Try removing the width and float from your #horizontal_line rule. This should allow the element to cover the entire width of the page. Is it still being moved?
0 Votes Up 0 Votes Down teedoff 310 Years Ago Violet, can you please tell me exactly what you would like for your page and elements too look like. I had played around with the navigation and horizontal rule and got them centered. Now I look back and maybe thats not what you wanted. Thanks. 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago
which div, the hr is not in a div.
Done, and yes the line is covering the whole page now and seems to be the same for IE7 and Firefox. If I remove the widthand floatthough the margin-top:0.15em;seems to get affected as well, at least in firefox
the horizontal line should be on the left, like in firefox, and get to the end of the top navigation, which is not happening in IE7 only, where the line is in fact centered for some reason 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago Ok then, I am happy to have a line that covers the entire width of the page if there is nothing we could do to fix it. all sorts of things happen like spacing between the line and the navigation goes crazy in IE7 and disappears completely in Firefox... 0 Votes Up 0 Votes Down
Violet_82 8910 Years Ago Ikunu, 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago Hi there, However, I solved one of the above problems, the space between the left corner and the top navigation. the code I had was #topnav ul { list-style: none; margin-left:10px; }but apparently firefox and chrome adds some extra padding (!!??), so I added this line padding-left:10px;to make it even and now it works! yay! Unfortunately I couldn't solve the other problem (the space between the horizontal navigation and the horizontal line). I applied pretty much the same logic even if this time IE7 seems to add some extra space between the two. I tried to even up the space removing any possible extra margin or padding and some extra modifications ending up with this /*This is the top navigation */ #topnav ul { list-style: none; margin-left:10px; /*to have some space on the left of the top navigation, but it is rendered differently in IE and firefox */ padding-left:10px; /*the above problem is resolved adding the padding. Firefox and chrome seem to add some extra padding on their own */ margin-bottom:0; padding-bottom:0; } #topnav li { float: left; margin-top:1em; margin-right:1.5em; margin-bottom:0; margin-left:0; /*bottom margin is because I want some space between the top navigation and the horizontal line but it is rendered differently in IE and firefox */ padding-bottom:0; font-family: Arial, Verdana, sans-serif; } body { background-color:#E6E6DC; } /* Horizontal line */ #horizontal_line { clear:both; color:#81a594; background-color:#81a594; height:0.35em; width:65%; float:left; padding-top:0; margin-top:0; border-style:none; /*Firefox seems to have a little border, so I removed it altogether */ }but no joy...there is always more space between the horizontal navigation and the horizontal line in IE7 than in firefox and chrome 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago I did yes, it's in line 18 of the css. I gave it 0 now because I was trying to determine how much more space IE7 gives it to the gap between the line and the navigation. I can give it any value really, still IE7 adds that little annoying bit. 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago I see, that makes sense, and does it need to go before or after the main CSS? in line 38, so if it doesn't float when I gave it that value, how do I make it float it left? I thought of "align" but that doesn't work either... 0 Votes Up 0 Votes Down Arkinder 9310 Years Ago By default, each browser has its own margin and padding for elements. To "reset" this simply add a universal rule (*) in your CSS. * { margin: 0; padding: 0; }As for the doctype I'm going to quote a mentor of mine, "The doctype is the set of rules you are telling the browser you are using to create the page. Change the doctype, change the rules."
0 Votes Up 0 Votes Down Violet_82 8910 Years Ago Thanks guys. then how do I play with margins and paddings? If I set them to 0 then I won't be able to say something like margin-top:1em; margin-right:1.5em; margin-bottom:0; margin-left:0;in the code? MidiMagic, if different browsers then apply different settings, the only way to get around will be, as I was suggested, to use a different stylesheet for IE then. Like the problem I am having with the horizontal line that is not centred in IE but it is in firefox et al 0 Votes Up 0 Votes Down teedoff 310 Years Ago No add * { } at the TOP of your css. Then you set margins and paddings for each element you want to have them. Ths global margin and padding rule is simply to set them to 0 or nothing, like a clean slate, so that all browsers start at the same place. 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago Ok thanks for that, it really makes the difference actually and sorts most of my problems out :) . 0 Votes Up 0 Votes Down teedoff 310 Years Ago I might have missed it, but do you have a link to your site? Sure would be much easier to see you issues live. One thing I will mention, and I'm just guessing, is that you created a div for a horizontal line correct? Why didn't you just insert a horizontal line and style the line itself. Not that it wouldnt work that way, just overkill. 0 Votes Up 0 Votes Down floatingDivs 2110 Years Ago Hi Violet82, I skimmed over the thread and tested out the HTML/CSS in the first post. It works fine in IE8 and Firefox. I realize the problem is IE7, but without sounding like a wise-ass, it should unless you're doing something wrong. At my job, we recently created a calendar solution using floats throughout the page with NO problems, tested in 100's of department skins. What I'd suggest is NOT fun, but it will pretty much guarantee you'll figure out your trouble-spot. What you think is the issue may not actually be the issue. Also, is there any way you could upload the site to a public server? 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago Hi there,
teedoff, The line is not in a div
floatingDivs, What would you propose?
Arkinder, what do you mean exactly? 0 Votes Up 0 Votes Down floatingDivs 2110 Years Ago Violet82, My apologies. I can't believe I forgot to include the suggestion for which I included a warning. *facepalm* The suggestion would be to restart the page from scratch and add little by little and test it various browsers. Find the EXACT html code that causes the problem. Just because one thing LOOKS like the problem does not mean it is. Once again, sorry! Hopefully, Daniweb helps you get your answer. 0 Votes Up 0 Votes Down Arkinder 9310 Years Ago The problem is only occurring in IE7. Modern browsers have no problem with it, so it's doubtful that there is anything actually wrong with the code. Taking apart the site would be pointless, not to mention a huge waste of time for a problem that's exclusive to a browser that's known for its many flaws. Try removing the width and float from your #horizontal_line rule. This should allow the element to cover the entire width of the page. Is it still being moved?
0 Votes Up 0 Votes Down teedoff 310 Years Ago Violet, can you please tell me exactly what you would like for your page and elements too look like. I had played around with the navigation and horizontal rule and got them centered. Now I look back and maybe thats not what you wanted. Thanks. 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago
which div, the hr is not in a div.
Done, and yes the line is covering the whole page now and seems to be the same for IE7 and Firefox. If I remove the widthand floatthough the margin-top:0.15em;seems to get affected as well, at least in firefox
the horizontal line should be on the left, like in firefox, and get to the end of the top navigation, which is not happening in IE7 only, where the line is in fact centered for some reason 0 Votes Up 0 Votes Down Violet_82 8910 Years Ago Ok then, I am happy to have a line that covers the entire width of the page if there is nothing we could do to fix it. all sorts of things happen like spacing between the line and the navigation goes crazy in IE7 and disappears completely in Firefox... 0 Votes Up 0 Votes Down |