Css problem with ie and ff

opel · #1 (**permalink**) 10-31-2007, 09:39 AM

Hi all,
I've been in the process of updating the header section on my site and have got it basically sorted for ie, I then checked in ff and its 'crap'.

Heres the link and the html : New header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New header</title>
<style type="text/css">

#header {
width: 100%;
background-color: #55298a;
position: absolute;
left: 0px;
top: 0px;
}

.head {
background-color: #956ac9;
color: #fefefe;
display: block;
line-height:28px;
text-decoration:none;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
padding: 0 10px;
letter-spacing: 1.5px;
}

#header2 {
width: 100%;
background-color: #e3e4e6;
}

#header2 p {
display: block;
float: left;
line-height: 82px;
padding-left: 50px;
font-size: 28px;
}
.topnav {
width: 100%;
padding: 0;
margin: 0;
background-image: url('phone.gif');
background-position: right;
background-repeat: no-repeat;
background-color: #55298a;
line-height:28px;
letter-spacing: 1.5px;
}

.topnav a:link, .topnav a:visited{
float: left;
color: white;
background-color: #55298a;
display: block;
width: 85px;
line-height:28px;
text-decoration:none;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
text-align: center;
border-right: thin solid #ffffff;
}
.topnav a:hover {
color: #000000;
}

</style>
</head>

<body>

<div id="header">
<div id="header2">
<p>the property investment experts</p>
<img src="logo.jpg" align="right" alt="" />
</div>
<div class="topnav">
<a href="#">home</a><a href="#">countries</a><a href="#" >prices</a><a href="#" >news</a><a href="#" >about</a><a href="#" >contact</a>
</div>
</div>
</body>

</html>

any ideas?
thanks
Opel

pagetta · #2 (**permalink**) 10-31-2007, 02:09 PM

you've got a whole css style called 'head' - where is this div??

you need to revisit some of your css techniques as you haven't specified font family or color anywhere.

generally a good tip is to design your site so that it works in FF as this is standards compliant, then fix bugs for IE, which isn't (although is getting better), not the other way around, otherwise you are fixing bugs with more bugs etc etc

the main issue is the background-color fill bug in FF - because of the floats the div efefctively has no height so you have to define this

I have done some code below I hope this helps

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New header</title>
<style type="text/css">

body {margin:0;}
#headpurple {
width:auto;
background-color:#e3e4e6;
height:94px;
}

#headpurple p {
font-family:"Times New Roman", Times, serif;
font-size:11px;
text-decoration:none;
padding: 30px 0 30px 50px;
font-size: 28px;
margin:0;
float:left;
background-color:#e3e4e6;
}
#headpurple img {
float:right;
margin:0;
border:1px solid #000;
}
#topnav {
clear:both;
width: 100%;
padding: 0;
margin: 0;
background-color: #55298a;
letter-spacing: 1.5px;
height:29px;
}

#topnav a:link, .topnav a:visited{
float: left;
color: white;
background-color: #55298a;
width: 85px;
line-height:28px;
text-decoration:none;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
text-align: center;
border-right: thin solid #ffffff;
}
#topnav a:hover {
color: #000000;
}

</style>
</head>

<body>

<div id="headpurple">

<p>the property investment experts</p>
<img src="logo.jpg" align="right" alt="" width="245" height="82" />
</div>

<div id="topnav">
<a href="#">home</a>
<a href="#">countries</a>
<a href="#" >prices</a>
<a href="#" >news</a>
<a href="#" >about</a>
<a href="#" >contact</a>
</div>
</body>

</html>

**weegillis** · #3 (**permalink**) 11-01-2007, 12:55 AM

You may wish to code your topnav as an unordered list to meet the WCAG guideline for adjacent links. If styles are turned off, your link phrases are going to run into each other like one big word. The other option is to insert 'space+printable character+space' between the anchors, as the guideline recommends.

Either of these methods will work: the list will appear vertically and bulleted when styles are off; the separated links will appear the same, styles or no styles.

opel · #4 (**permalink**) 11-01-2007, 09:42 AM

thanks Pagetta for the code and the heads-up on coding for FF first and then sorting the ie bugs out second.

The Head div you mentioned was my mistake as the code was lifted from a whole page where the fonts etc were specified and I forgot to include them on the segment.

mikmik · #5 (**permalink**) 11-19-2007, 04:00 AM

Yeah, Pagetta, that is good code. I usually make the first as "body, html" and set padding. Why do you use width=auto instead of 100%?
I have been out of it for a while, perhaps I am missing something?

xhtml strict - I like this!

weegillis, unordered lists are the right thing. Do you have any links about these?

WDC · #6 (**permalink**) 12-10-2007, 05:35 AM

I am facing some kind of similar problem with my web site design. I have already posted at this forum regarding that. Please suggest any solution if you have

thanks...

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Is this a serious SEO problem?	Nick-UK	Search Engine Optimization Forum	16	09-13-2006 11:35 PM
Problem 301- 302	ryanforbes	Google Discussion Forum	7	04-13-2006 06:42 AM
CSS Problem	EmmaGale	Graphics & Design Discussion Forum	7	10-27-2004 09:54 AM
CSS / IE problem...	Orion	Web Programming Discussion Forum	2	06-21-2004 05:02 PM
CSS Problem	MrLeN	Web Programming Discussion Forum	8	01-06-2004 01:58 PM