div tags using CSS (Win/Mac conflict)

**FordCorsair** · 11-08-2005, 02:03 PM

have a problem with the following, in that whilst it looks how I want it to on Windows IE, on a Mac browser (Safari or IE5) all the alignment of my divs go wrong. I don't know where to go from here...

Here goes, a long list of HTML including CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (WinNT; I) [Netscape]">
<title>euroimage - welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="euroimage.css" rel="stylesheet" type="text/css">
<style>
.headings {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #00CCCC;
text-align: left;
margin-right: 20px;
margin-left: 20px;
background-position: center;
width: 100%;
border-top: none;
border-right: none;
border-bottom: 1px solid #00cccc;
border-left: none;
text-decoration: none;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 4px;

}

.bodytext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-align: left;
background-position: center bottom;
font-style: normal;
width: 100%;
margin-right: 20px;
margin-left: 20px;
height: 80%;
margin-top: 5px;
margin-bottom: 5px;
border-top: 1px none #00CCCC;
border-right: 1px none #00CCCC;
border-bottom: 1px solid #00CCCC;
border-left: 1px none #00CCCC;
overflow: auto;
padding-top: 6px;
padding-bottom: 6px;
line-height: 24px;
padding-left: 24px;
float: none;
padding-right: 24px;
text-decoration: none;

}

.designby {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #009999;
line-height: 24px;
text-align: center;
margin-right: 20px;
margin-left: 20px;
float: none;
height: 20px;
width: 100%;
border-top: 1px none #00CCCC;
border-right: 1px #00CCCC;
border-bottom: 1px solid #00CCCC;
border-left: 1px #00CCCC;
vertical-align: bottom;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;

}

.imagebox {
border: 1px solid #FFFFFF;
background-color: #009999;
margin: 4px 4px 4px 20px;
background-position: left top;
height: 71px;
width: 100px;

}

.imageboundingbox {
border: 1px none #FFFFFF;
margin: 4px;
float: left;
height: 90%;
width: 100px;

}

.weblink {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 600;
color: #00CCCC;
text-align: center;
padding: 0px;
text-decoration: none;
border-top: 0px;
border-right: 0px 60;
border-bottom: 0px;
border-left: 0px;
font-style: italic;

}

.domcoleman {
color: #00CCCC;
text-decoration: none;
}

.dynamicdrive {
margin: 6px 24px 4px 4px;
height: auto;
text-align: right;

}
</style>
</head>

<body bgcolor="336666" topmargin="0">
<div class="headings">Welcome</div>
<div align="centre" class="imageboundingbox">
<div><img src="images/FLASH%20gallery/Croatia_EI/images/Croatia397_1.jpg" width="800" height="357" class="imagebox"></div>
<div><img src="images/FLASH%20gallery/Great%20Britain_EI/images/photo013_1.jpg" width="530" height="800" class="imagebox"></div>
<div><img src="images/FLASH%20gallery/Italy%20-%20Lake%20Garda_EI/images/DSCF0001_1.jpg" width="800" height="600" class="imagebox"></div>
<div><img src="images/FLASH%20gallery/France_EI/images/DSC_0525.jpg" width="800" height="532" class="imagebox"></div>
<div><img src="images/FLASH%20gallery/Italy%20-%20Burano_EI/images/DSCF0188.jpg" width="715" height="800" class="imagebox"></div>
</div>
</div>
<div class="bodytext">
<p>Euroimage.co.uk has been photographing Northern Italy, the coast of Croatia and southern regions of France for three years. In its infancy, a major tourism company commissioned euroimage.co.uk
to supply imagery for their 2003 and 2004 brochures. Another travel company has since used images created by euroimage.co.uk.<br>
</p>
<p>Currently under development, the euroimage.co.uk image data base is constantly
expanding. This web site is just a small sample of what is available.<br>
</p>
<p>For further information on imagery and costs please contact <font color="#FFFF00"><a href="mailto:www.euroimage.co.uk" class="weblink">euroimage.co.uk</a></font>;
we could have just what you are looking for.
</p>
</p>
</div>
<div class="designby"> (¯`·._.·´[ website design by :: <a href="mailto:dom@domcoleman.co.uk" class="domcoleman">www.domcoleman.co.uk</a> ]`·._.·´&macr

</div>
<div class="dynamicdrive"><img src="images/dynamiclogo4.gif"></div>
</body>
</html>

**mwinter** · 11-09-2005, 07:55 PM

Originally Posted by FordCorsair

have a problem with the following, in that whilst it looks how I want it to on Windows IE, on a Mac browser (Safari or IE5) all the alignment of my divs go wrong.

That's not a particularly informative description, but perhaps you're seeing what I do in Firefox.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Developing in 'Quirks' mode it's a good idea, particularly when using IE to evaluate your work. Use a standards-compliant browser like Firefox or Opera, and author documents that trigger 'Standards' mode rendering.

If you must use a Transitional document type declaration, include the system identifier:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<style>

The type attribute is required, and should have the value, "text/css".

.headings {
font-family: Verdana, Arial, Helvetica, sans-serif;

Using Verdana is generally a bad idea. Don't use it.

font-size: 18px;

Don't specify font sizes in pixels. IE users cannot resize it due to a bug, and this is a potential usability problem. Use percentages instead.

margin-right: 20px;
margin-left: 20px;
[...]
width: 100%;
border-top: none;
border-right: none;
border-bottom: 1px solid #00cccc;
border-left: none;
[...]
padding-top: 3px;
padding-bottom: 3px;
padding-left: 4px;

The width property specifies the width of the content box. Padding, borders and margins are then added to it. At 100% width, this will cause the element to overflow its container. Block-level elements will expand, by default, so that they will fill their containers.

background-position: center bottom;

Why a background-position declaration when you don't have background images?

height: 80%;

Percentage values with the height property only apply when the containing block for an element has an explicitly specified height (not the case, here). It will be interpreted as the auto value otherwise.

margin-top: 5px;
margin-bottom: 5px;

Code:

margin: 5px 0;

would suffice. The same for padding-top/padding-bottom.

border-top: 1px none #00CCCC;
border-right: 1px none #00CCCC;
border-bottom: 1px solid #00CCCC;
border-left: 1px none #00CCCC;

The only declaration that needs to be there is the third (border-bottom).

padding-left: 24px;
padding-right: 24px;

Code:

padding: 0 24px;

The margin-left/margin-right combination in the previous rule could be similarly reduced.

float: none;

Unless the content would be floated by another, less specific rule, this is unnecessary.

All hex-specified colour values must begin with a hash (#) symbol. Both of those attributes could, and should, be replaced with:

Code:

body {
  background: #336666;
  color: #ffffff;
  margin-top: 0;
}

<div class="headings">Welcome</div>

Headings should be marked-up as headings, not semantically-neutral block-level elements. If you don't like how a level-1 (h1) heading looks, style it with CSS.

If none of these images are content (they're for decoration), include an empty alt attribute (alt="").

Rather than add a class attribute to each img element, use the document structure in the selector.

Code:

.imageboundingbox img {
  /* ... */
}

not

Code:

.imagebox {
  /* ... */
}

Never use the font element. Ever. Style the link.

<div class="designby"> (¯`·._.·´[ website design by :: <a href="mailto:dom@domcoleman.co.uk" class="domcoleman">www.domcoleman.co.uk</a> ]`·._.·´¯)</div>

ASCII art in HTML isn't cute. Use images if you want that sort of decoration.

Perhaps the example I've prepared will look more like your intentions. I should hope so as even IE4 displays it reasonably sanely.

The visited link colour should be different than the one I used there as the contrast is too low.

Mike

**FordCorsair** · 11-10-2005, 09:02 AM

Mike,

many thanks for taking the time to analyse my first proper attempt at divs and CSS. You have provided very informative feedback which I shall study and will endeavour to put into good practice. Also, I didn't expect a working example that I shall probably use for the site in question.

thanks again.

Dom

**FordCorsair** · 12-01-2005, 08:24 AM

This is the result of Mike Winter's help.

http://www.euroimage.co.uk/

I used frames because the navigation section was created in Fireworks and needed to be there all the time without having it re-load each time a page changed (my reason anyway). Gallery content was created using a plug from iPhoto bundled with Mac OSX.

Many thanks Mike.

**Echos** · 12-02-2005, 06:52 PM

Any suggestion or information regarding why firefox shows the div widths larger than IE?

if you have firefox and IE, I also would appreciate feedback on my site:

http://www.rustipher.com/~loni/

Thanks

Thread: div tags using CSS (Win/Mac conflict)

Thread Tools

Search Thread

div tags using CSS (Win/Mac conflict)

Thanks

I guess I'm experiencing something of the same issue

Bookmarks

Bookmarks

Posting Permissions