CSS Border only showing in IE6, not FireFox 3, Opera | Moderator | | Join Date: Mar 2006
Posts: 1,103
| |
I seem to be missing the borders from div.level1 and div.level2 when viewed in FireFox or Opera. Simplified version of the code. -
<?xml version="1.0" encoding="UTF-8"?>
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
<HTML>
-
<head>
-
<title>Useful Links</title>
-
<style type="text/css">
-
body{background-color: #000000;
-
margin:0px;
-
border:0px;
-
padding:10px;}
-
div.level1 {border: medium double rgb(200,200,200)
-
margin: 0px;
-
padding:10px;}
-
h1 {font-size:150%;
-
color: #0000FF;
-
margin:0px;
-
border:0px;
-
padding:0px;}
-
div.level2 {padding:0px, 10px;
-
border: medium groove rgb(111,111,111)
-
margin: 0px;}
-
h2 {font-size:130%;
-
color: #11EE11;
-
margin:0px;
-
border:0px;
-
padding:0px;}
-
div.link {margin:3px, 10px;}
-
-
a {font-weight: bold;}
-
a:link {color: #FFFFFF;}
-
a:visited {color: #FFFFFF;}
-
a:hover {color: #0000FF;}
-
a:active {color: #FF0000;}
-
a.new {font-size: 60%;}
-
-
</style>
-
</head>
-
<body>
-
<div class="level1">
-
<h1>Admin</h1>
-
<div class="level2">
-
<h2>Applications</h2>
-
<div class="link"><a href="http://www.google.ca" class="main">Google</a> <a href="http://www.google.ca" target="_blank" class="new">New Window</a></div>
-
</div>
-
</div>
-
</body>
-
</HTML>
-
Am I declaring border styles incorrectly? Mostly just copied examples from w3schools.
Versions used:
IE 6.0 sp2
Firefox 3.0.3
Opera 9.5.1
|  | Newbie | | Join Date: Oct 2008
Posts: 27
| | | re: CSS Border only showing in IE6, not FireFox 3, Opera
I'm no expert but after a quick look I noticed you forgot to add a semicoln after your borders in the declaration. - <?xml version="1.0" encoding="UTF-8"?>
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
<HTML>
-
<head>
-
<title>Useful Links</title>
-
<style type="text/css">
-
body{background-color: #000000;
-
margin:0px;
-
border:0px;
-
padding:10px;}
-
div.level1 {border: medium double rgb(200,200,200);
-
margin: 0px;
-
padding:10px;}
-
h1 {font-size:150%;
-
color: #0000FF;
-
margin:0px;
-
border:0px;
-
padding:0px;}
-
div.level2 {padding:0px, 10px;
-
border: medium groove rgb(111,111,111);
-
margin: 0px;}
-
h2 {font-size:130%;
-
color: #11EE11;
-
margin:0px;
-
border:0px;
-
padding:0px;}
-
div.link {margin:3px, 10px;}
-
-
a {font-weight: bold;}
-
a:link {color: #FFFFFF;}
-
a:visited {color: #FFFFFF;}
-
a:hover {color: #0000FF;}
-
a:active {color: #FF0000;}
-
a.new {font-size: 60%;}
-
-
</style>
-
</head>
-
<body>
-
<div class="level1">
-
<h1>Admin</h1>
-
<div class="level2">
-
<h2>Applications</h2>
-
<div class="link"><a href="http://www.google.ca" class="main">Google</a> <a href="http://www.google.ca" target="_blank" class="new">New Window</a></div>
-
</div>
-
</div>
-
</body>
-
</HTML>
-
I added them in and it seems to work in the browsers you mentioned for me.
| | Moderator | | Join Date: Mar 2006
Posts: 1,103
| | | re: CSS Border only showing in IE6, not FireFox 3, Opera
Ah,ok thanks. can't believe it was something that stupid. Error didn't show when I validated with w3c. Curse IE6 for rendering invalid pages.
|  | Expert | | Join Date: Sep 2006
Posts: 5,561
| | | re: CSS Border only showing in IE6, not FireFox 3, Opera
Another problem you will have is that you are using the xml declaration on the first line. It is correct to do this but only modern browsers understand it while IE6 will go into quirks mode and not attempt to perform like a modern browser.
Also, case matters in XHTML. Your closing tag </HTML> will be flagged by the validator. Not that is matters because you aren't serving XHTML anyway and no version of IE handles XHTML either.
|  |
| | |  /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 226,295 network members.
|
