cranebill Posted October 3, 2008 Share Posted October 3, 2008 Hi, I am trying to make a page, 1 header and underneath 3 columns inside a container div,, left and right fixed width 3cm and center one is to automatically resize itself to fit.my problem, would appear in FF not IEwhen the padding in the header is set at zero, the 4 divs line up great, when I set the header padding at 10px 10px 10px 10px (actually it does not matter what it is set to, any type of measurement) the right hand side ( I have a background colour set in all 4 divs, so I can see what I am doing) background colour, seems to bleed over to the right hand side, by about as much as I think the padding setting is.This makes the page look un symetrical, what am I doing wrong as I have no idea why it is doing it on the header only, I have padding set on the other 3 divs and it is not doing that. I have width on the header set at 100%, but I can't work out why that would make a difference*** Not sure if this is relevant, I am doing it off the desk top using one css and one html file*** css with padding in header/* this is the div section for a header and 3 columns*/div.container{margin: 1cm 3cm 1cm 3cm;border: 1px solid}div.header{background-color:#00FFFF;width:100%;height:150px;overflow: auto;margain: 10px;padding: 12px 12px 12px 12px; }div.left{float: left;background-color:yellow;width:3cm;height:400px;overflow: auto;padding: 12px 12px 12px 12px;}div.center{background-color:green;width:auto;height:400px;overflow: auto;padding: 12px 12px 12px 12px;}div.right{float: right;background-color:blue;width:3cm;height:400px;overflow: auto;padding: 12px 12px 12px 12px;This css has no padding on the header and it all sits great/* this is the div section for a header and 3 columns*/div.container{margin: 1cm 3cm 1cm 3cm;border: 1px solid}div.header{background-color:#00FFFF;width:100%;height:150px;overflow: auto;margain: 10px;padding: 0px 0px 0px 0px;}div.left{float: left;background-color:yellow;width:3cm;height:400px;overflow: auto;padding: 12px 12px 12px 12px;}div.center{background-color:green;width:auto;height:400px;overflow: auto;padding: 12px 12px 12px 12px;}div.right{float: right;background-color:blue;width:3cm;height:400px;overflow: auto;padding: 12px 12px 12px 12px;}This is the HTML<html><head><link rel="stylesheet" type="text/css" href="testcss.css" /> <title>***</title></head><body><div class="container"><div class="header"></div><div class="left"></div><div class="right"></div><div class="center"></div></div></body></html> Link to comment Share on other sites More sharing options...
cranebill Posted October 3, 2008 Author Share Posted October 3, 2008 Ok, I have played about some more and changed the width in the header to auto, this appears to have solved my problem, can some one explain, why the issue I was having, is like this in FF and not ie?Also as an aside, can some one explain, why the 3 cloumn section has two feint white dividing lines (vertical) in FF and not ie (in ie the appearance is like a good fit, I realise that if I remove the temporary backgrouns, it wont matter (?) but I am not sure how I go about removing the white lines (spaces) from the web page (I can see an issue if I was to use a background image as opposed to no background at all Link to comment Share on other sites More sharing options...
Jerry62704 Posted October 3, 2008 Share Posted October 3, 2008 Ok, I have played about some more and changed the width in the header to auto, this appears to have solved my problem, can some one explain, why the issue I was having, is like this in FF and not ie?Also as an aside, can some one explain, why the 3 cloumn section has two feint white dividing lines (vertical) in FF and not ie (in ie the appearance is like a good fit, I realise that if I remove the temporary backgrouns, it wont matter (?) but I am not sure how I go about removing the white lines (spaces) from the web page (I can see an issue if I was to use a background image as opposed to no background at allThe reason they display differently is IE uses different assumptions than compliant browsers use. You seem to be developing to that almost there standard and are getting bit when you view it in a better browser.Do you have a DOCTYPE on your page? That helps standardize the different browsers. IE had a fundamentally different way of building certain things (the box bug) than anyone else does. That can also show up.What I would do is:1) develop in FF and then port to IE2) add Firebug to FF and use it to see where the gaps are coming from[edit: I see you are not using a DOCTYPE. Major problem. Add one.] Link to comment Share on other sites More sharing options...
cranebill Posted October 3, 2008 Author Share Posted October 3, 2008 The reason they display differently is IE uses different assumptions than compliant browsers use. You seem to be developing to that almost there standard and are getting bit when you view it in a better browser.Do you have a DOCTYPE on your page? That helps standardize the different browsers. IE had a fundamentally different way of building certain things (the box bug) than anyone else does. That can also show up.What I would do is:1) develop in FF and then port to IE2) add Firebug to FF and use it to see where the gaps are coming from[edit: I see you are not using a DOCTYPE. Major problem. Add one.] I only notice the white lines when I have borders showing, so it appears to be a non problem at the moment (well for the level at which I am designing my site)Also, does having a (border: 0px solid;) style in the css div, make any difference, I do not need it in the css sheet, I only have it there to turn the borders on when I want to see what I am doing while playing about with different positions, i.e I suppose my question is, Is it bad practice to have styles in the css sheets that you don't use even if the values are set to zero ( I hope I am making sense here)Added this already <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">What is fire bug? Link to comment Share on other sites More sharing options...
Jerry62704 Posted October 3, 2008 Share Posted October 3, 2008 I only notice the white lines when I have borders showing, so it appears to be a non problem at the moment (well for the level at which I am designing my site)Also, does having a (border: 0px solid;) style in the css div, make any difference, I do not need it in the css sheet, I only have it there to turn the borders on when I want to see what I am doing while playing about with different positions, i.e I suppose my question is, Is it bad practice to have styles in the css sheets that you don't use even if the values are set to zero ( I hope I am making sense here)Added this already <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">What is fire bug?You totally WANT to have some zeros. Number one is:* {margin: 0; padding:0; border:0;}to get the various browsers on a more universal footing. The default for them would vary, but would change the layout of your page depending on the browser.Firebug is the add-on for Firefox and is worth its weight in gold. You bring up your page and you can play what-if games changing the values to see what happens. It's free, too.https://addons.mozilla.org/en-US/firefox/addon/1843Just open FF and go there and click the button. Link to comment Share on other sites More sharing options...
cranebill Posted October 4, 2008 Author Share Posted October 4, 2008 You totally WANT to have some zeros. Number one is:* {margin: 0; padding:0; border:0;}to get the various browsers on a more universal footing. The default for them would vary, but would change the layout of your page depending on the browser.Firebug is the add-on for Firefox and is worth its weight in gold. You bring up your page and you can play what-if games changing the values to see what happens. It's free, too.https://addons.mozilla.org/en-US/firefox/addon/1843Just open FF and go there and click the button. wow fire bug looks great thx Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.