February 25th, 2004
09:46 PM
Div perfect in IE, ugly in Mozilla
This div looks fine in IE
but when i view it in mozilla, its ugly.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div.box {
margin: 0 auto;
width: 380px;
z-index: 1;
}
div.icon {
float: left;
text-align: left;
width: 86;
z-index: 2;
}
div.tut-title{
float: right;
text-align: right;
width: 290px;
font-family: Arial Narrow;
font-size: 14px;
font-weight: bold;
color: #008EEF;
z-index: 3;
}
div.content2{
margin: 0 auto;
float: right;
text-align: left;
width: 286px;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #000000;
z-index: 4;
}
body {
background-color: #000000;
}
</style>
</head>
<body>
<!--Start Main content box-->
<table width="409" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="23" valign=top align=center class=pagetitle>
Photoshop</td>
</tr>
<tr>
<td align=center><table width="407" height="842" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign=top align=center class="newsborder">
<br><div class=box><div class=icon><a href=#><img src=test.jpg border=0 width=70 height=70></a></div><div class=tut-title>Title<div class=content2>Content Like Description</div></div></div>
<br><div class=box><div class=icon><a href=#><img src=test.jpg border=0 width=70 height=70></a></div><div class=tut-title>Title 2<div class=content2>Content Like Description</div></div></div>
<br><div class=box><div class=icon><a href=#><img src=test.jpg border=0 width=70 height=70></a></div><div class=tut-title>Title 3<div class=content2>Content Like Description</div></div></div>
<br><div class=box><div class=icon><a href=#><img src=test.jpg border=0 width=70 height=70></a></div><div class=tut-title>Title 4<div class=content2>Content Like Description</div></div></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--End Main content box-->
</body>
</html>
Preview it here
http://www.thecyberdoc.com/test.html
___________________
February 25th, 2004
09:59 PM
thinking of something witty to put here
Status: Offline!
You're not gaining any of the benefits of divs if your putting them inside of a table.
February 25th, 2004
10:03 PM
I need a haircut
Status: Offline!
LOL hybrid design.
unprecedented, good work.
___________________
Jon Culver Chia Pets
February 25th, 2004
10:14 PM
but when i view it in mozilla, its ugly
it looks like it's coded in mozilla 
February 25th, 2004
10:15 PM
Neverside Newbie
Status: Offline!
Originally posted by Radley
You're not gaining any of the benefits of divs if your putting them inside of a table.
That and since you use z-index, putting them in tables will make no difference.
February 25th, 2004
10:39 PM
thinking of something witty to put here
Status: Offline!
Originally posted by Josh
it looks like it's coded in mozilla
What are you talking about?
February 25th, 2004
11:27 PM
If it looks good in IE but ugly in Mozilla, then you've got a problem for sure. I know this is going to sound repeatitive but mozilla is standard compliant, and supports CSS a lot better than IE.
get it right in Mo' first; then work around less compliant browsers...and take out the tables bro, your defeating the purpose of using any <styles> on your page.
___________________
Signature Suspended as it is in violation with the signature rules
February 26th, 2004
12:11 AM
Perpetual college student
Status: Offline!
You're running into the box model bug in IE. According to the standards, the width of an element is:
width: 100px; PLUS
padding-left: 10px; PLUS
padding-right: 10px; PLUS
border-left: 1px; PLUS
border-right: 1px; PLUS
margin-left: 10px; PLUS
margin-right: 10px;
To give the element a width of 142 pixels.
Internet Explorer 5.x/PC, and 6.0/PC running in Quirks Mode calculates the width of an element in the following way:
width: 100px; PLUS
margin-left: 10px; PLUS
margin-right: 10px;
Padding and borders are absorbed into the width: property and do not add to the width: like the standards say.
And I mentioned that IE 6.0 gets the box model wrong in Quirks Mode. I viewed the source for your code and found no DOCTYPE tag before the opening HTML tag.
Fix your site with the right doctype tag
Adding a full doctype tag and a character set declaration meta tag throws modern browsers into Standards Compliance Mode. More specifically: Mozilla, FF, FB, Opera, IE6/PC, IE5/Mac, Safari, Camino (a mozilla-based browser for mac)
The workaround is simple. Add a full doctype and character set declaration meta tag to your HTML document. Head to http://validator.w3.org/ and make sure your HTML validates. Now to solve the box model issue.
Note that IE5.x/PC always gets the box model wrong. So...
<?php
<style type="text/css" media="screen">
<!--
#parent {
width: 100px; /* This is the width you want an element to be */
/* Do not put padding, margins or borders here */
}
#child {
/* Leave the width declaration out. The width is calculated for you */
/* Place necessary padding, borders and margins here */
}
-->
</style>
.
.
.
<div id="parent">
<div id="child">
<p>All the rest of the HTML for this column goes here.</p>
</div>
</div>
?>
That's the basic workaround. There are others, but this is the easiest to use.
___________________
I can't believe you just hit that car!
-- I couldn't see it!
You couldn't see it!?
-- It was at a funny angle.
... Tyrone. It was RIGHT behind you. When you're in reverse, things come from behind!!
February 26th, 2004
12:43 AM
thinking of something witty to put here
Status: Offline!
That may be the simplest workaround, but it is the least semantic, so I don't reccomend that method. Take a look at this alternate box model hack page for more info on better alternatives.
February 26th, 2004
02:42 AM
Perpetual college student
Status: Offline!
The method I showed above is about the only way to get percentage widths to work if you want to add padding, margins, and borders of a set pixel value. At least I've never run into workaround for that.
Example:
You want a 1 pixel border between two columns set to a percentage of the screen. You'd have to set the border as a percentage and subtract that from the width. But 1 pixel on a 1024 X 768 screen is a different percentage of the width than on an 800 X 600.
It's also quicker and easier because you can set the width to a nice even number like you want, and then the browser does all the nitty-gritty calculating for you in the #child div.
The two DIVs themselves are non-semantic. That's true. But then inside the #child DIV you'd place all the semantic markup for that column. In essence, the DIV is the fat in the HTML page. More HTML than may be needed: yes. But not so much more that it adversely affects a web site's performance.
And as I mentioned before, it's easier than calculating the widths minus the padding, borders and margins.
___________________
I can't believe you just hit that car!
-- I couldn't see it!
You couldn't see it!?
-- It was at a funny angle.
... Tyrone. It was RIGHT behind you. When you're in reverse, things come from behind!!
Last edited by toicontien, February 26th, 2004 02:46 AM (Edited 1 times)
