I am attempting to revamp a site with css, but it isn't going very well. I finding it extremely difficult to reproduce certain graphics, and make the site compatible with various browsers. In particular, one problem I seem to have is that I really need to use padding, yet Firefox completely ignores it. What do I use instead? Or what am I doing wrong?IE in "normal" mode calculates width of a box element differently than Firefox, which calculates it per the CSS standard. The standard says that...
box-width = width + padding + border-width + margin
...whereas IE uses the width parameter for the entire box width and scales the content area down according to the other 3 parameters. You can get IE6 to work the same as Firefox by using the "strict" doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
One way to then get DIV elements, for example, to provide desired padding is to use a "box within a box" technique, something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<title>Test Page</title>
<style type=text/css>
body {
background-color:#999999;
margin:0;
padding:0;
font-family: arial, sans-serif;
}
div.main {
background-color: white;
margin: 0;
padding: 0;
}
div.nav{
background-color:#336699;
width:100%;
padding: 5px 25px;
}
div.text{
background-color: white;
padding: 15px 15% 15px 25px;
}
p.nav{
width: auto;
color:white;
font-size:small;
font-weight:bold;
}
a:link{color:#0033cc;}
a:visited{color:#003366;}
a:hover{color:#0066ff;}
a:active{color:#0066ff;}
a.nav{text-decoration:none;}
a.nav:link{color:white;}
a.nav:visited{color:white;}
a.nav:hover{color:yellow;text-decoration:underline;}
a.nav:active{color yellow;}
</style>
</head>
<body>
<div class=main>
<div class=nav>
<p class=nav>
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/index.php target=_top>Home</a> |
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/photos.php target=_top>Photos</a> |
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/misc.php target=_top>Miscellaneous</a> |
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/search.html target=_top>Search</a></p>
</div>
<div class=text>
<h1>Test</h1>
<p>This is a test. It is only a test. This is a test.
It is only a test. This is a test. It is only a test.</p>
<p>This is a test. It is only a test. This is a test.
It is only a test. This is a test. It is only a test.</p>
<p>This is a test. It is only a test. This is a test.
It is only a test. This is a test. It is only a test.</p>
<p>This is a test. It is only a test. This is a test.
It is only a test. This is a test. It is only a test.</p>
<p>This is a test. It is only a test. This is a test.
It is only a test. This is a test. It is only a test.</p>
<p>This is a test. It is only a test. This is a test.
It is only a test. This is a test. It is only a test.</p>
</div>
<div class=nav>
<p class=nav>
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/index.php target=_top>Home</a> |
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/photos.php target=_top>Photos</a> |
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/misc.php target=_top>Miscellaneous</a> |
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/search.html target=_top>Search</a></p>
</div>
</div>
</body>
</html>That's good, I think.
I think, because it has completely screwed up the entire format of the page. Although I think it is probably a good starting point. At least now they look the same ( IE and Firefox). My only problem is that I now have a lot of questions to resolve the mess. :-(Okay, I am getting there!
Once I used the -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
Thingy, it all started to fall into place. Actually that was probable the most important thing that no one previously told me - if you see what I mean! The reason it was all screwed up in Firefox is because everything was set wrong and hence it displayed like poo. Now I can set all the widths and so on correctly, I am getting someplace.
I must admit that the IE settings are a lot easier - but never mind.
I am having one big problem though...
The pages use a css menu but under Firefox, it is not correct. And I can't see why. This menu -
div#menu_container{font_family:arial; text-align:left; font-size: 10pt; font-weight:bold; border:1px solid #666666; background-color:#333333; width:116px; color:#CCCCCC; padding:4px 1px 0px 1px;}
a:link.menu, a:active.menu, a:visited.menu { padding-left:5px; background-color:#D7D7D7; color:#666666; text-decoration:none; height:17px; width:116px; }
a:hover.menu {background-color: #990000; color: #FFFFFF; }
.break{background-color:#333333; width:116px; height:18px; }
a:link.down, a:active.down, a:visited.down {padding-left:5px; background-color:#990000; color:#FFFFFF; text-decoration:none; font-size:10pt; height:17px; width:116px; }
<div id="menu_container">
<div class="break">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.htm" class="menu">10000</a></div>
<diviv class="break">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.htm" class="menu">20000</a></div>
</div>
The highlight is supposed to go right accross the width of the container, yet it stops at the end of the text.Originally posted by SuzanneB
That's good, I think.
I think, because it has completely screwed up the entire format of the page. Although I think it is probably a good starting point. At least now they look the same ( IE and Firefox). My only problem is that I now have a lot of questions to resolve the mess. :-(
Yeah, I just ran into this very recently, as I started converting my website to CSS, got it to look the way I wanted, then decided to try it in Firefox and found it to be totally screwed up. Thus your message caught my eye as probably someone running into the same confusion I did.
Now I'm waiting to leave work so I can get home and see if my latest fix to my site still works in Firefox, or if I screwed it up again.
Same problem here. I thought I was going mad, but it is all starting to make sense now. I just have a few critical problems left ( like the one I mentioned with the menu).
box-width = width + padding + border-width + margin
...whereas IE uses the width parameter for the entire box width and scales the content area down according to the other 3 parameters. You can get IE6 to work the same as Firefox by using the "strict" doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
One way to then get DIV elements, for example, to provide desired padding is to use a "box within a box" technique, something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<title>Test Page</title>
<style type=text/css>
body {
background-color:#999999;
margin:0;
padding:0;
font-family: arial, sans-serif;
}
div.main {
background-color: white;
margin: 0;
padding: 0;
}
div.nav{
background-color:#336699;
width:100%;
padding: 5px 25px;
}
div.text{
background-color: white;
padding: 15px 15% 15px 25px;
}
p.nav{
width: auto;
color:white;
font-size:small;
font-weight:bold;
}
a:link{color:#0033cc;}
a:visited{color:#003366;}
a:hover{color:#0066ff;}
a:active{color:#0066ff;}
a.nav{text-decoration:none;}
a.nav:link{color:white;}
a.nav:visited{color:white;}
a.nav:hover{color:yellow;text-decoration:underline;}
a.nav:active{color yellow;}
</style>
</head>
<body>
<div class=main>
<div class=nav>
<p class=nav>
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/index.php target=_top>Home</a> |
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/photos.php target=_top>Photos</a> |
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/misc.php target=_top>Miscellaneous</a> |
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/search.html target=_top>Search</a></p>
</div>
<div class=text>
<h1>Test</h1>
<p>This is a test. It is only a test. This is a test.
It is only a test. This is a test. It is only a test.</p>
<p>This is a test. It is only a test. This is a test.
It is only a test. This is a test. It is only a test.</p>
<p>This is a test. It is only a test. This is a test.
It is only a test. This is a test. It is only a test.</p>
<p>This is a test. It is only a test. This is a test.
It is only a test. This is a test. It is only a test.</p>
<p>This is a test. It is only a test. This is a test.
It is only a test. This is a test. It is only a test.</p>
<p>This is a test. It is only a test. This is a test.
It is only a test. This is a test. It is only a test.</p>
</div>
<div class=nav>
<p class=nav>
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/index.php target=_top>Home</a> |
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/photos.php target=_top>Photos</a> |
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/misc.php target=_top>Miscellaneous</a> |
<a class=nav href=http://www.webdeveloper.com/forum/archive/index.php/search.html target=_top>Search</a></p>
</div>
</div>
</body>
</html>That's good, I think.
I think, because it has completely screwed up the entire format of the page. Although I think it is probably a good starting point. At least now they look the same ( IE and Firefox). My only problem is that I now have a lot of questions to resolve the mess. :-(Okay, I am getting there!
Once I used the -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
Thingy, it all started to fall into place. Actually that was probable the most important thing that no one previously told me - if you see what I mean! The reason it was all screwed up in Firefox is because everything was set wrong and hence it displayed like poo. Now I can set all the widths and so on correctly, I am getting someplace.
I must admit that the IE settings are a lot easier - but never mind.
I am having one big problem though...
The pages use a css menu but under Firefox, it is not correct. And I can't see why. This menu -
div#menu_container{font_family:arial; text-align:left; font-size: 10pt; font-weight:bold; border:1px solid #666666; background-color:#333333; width:116px; color:#CCCCCC; padding:4px 1px 0px 1px;}
a:link.menu, a:active.menu, a:visited.menu { padding-left:5px; background-color:#D7D7D7; color:#666666; text-decoration:none; height:17px; width:116px; }
a:hover.menu {background-color: #990000; color: #FFFFFF; }
.break{background-color:#333333; width:116px; height:18px; }
a:link.down, a:active.down, a:visited.down {padding-left:5px; background-color:#990000; color:#FFFFFF; text-decoration:none; font-size:10pt; height:17px; width:116px; }
<div id="menu_container">
<div class="break">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.htm" class="menu">10000</a></div>
<diviv class="break">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.htm" class="menu">20000</a></div>
</div>
The highlight is supposed to go right accross the width of the container, yet it stops at the end of the text.Originally posted by SuzanneB
That's good, I think.
I think, because it has completely screwed up the entire format of the page. Although I think it is probably a good starting point. At least now they look the same ( IE and Firefox). My only problem is that I now have a lot of questions to resolve the mess. :-(
Yeah, I just ran into this very recently, as I started converting my website to CSS, got it to look the way I wanted, then decided to try it in Firefox and found it to be totally screwed up. Thus your message caught my eye as probably someone running into the same confusion I did.
Now I'm waiting to leave work so I can get home and see if my latest fix to my site still works in Firefox, or if I screwed it up again.
Same problem here. I thought I was going mad, but it is all starting to make sense now. I just have a few critical problems left ( like the one I mentioned with the menu).