Need a little PHP fixing - Please look at this code and tell me where the problem is.

<div id="header">
<div class="wrap">
<div id="top"><div class="left"><a href="/"><img src="image.jpg" alt="Keyword" title="Keyword"></a></div><div class="right"><a href="mailto:info@domain.com" class="email"></a></div><div class="clear"></div></div>
<div id="nav">
<div class="clear"></div>
<ul>
<li><a href="http://www.domain.com" alt="Top 50 Web Sites" title="Top 50 Web Sites">Top 50</a><br><a href="http://www.domain.com/health.php" alt="Top 50 Health" title="Top 50 Health">Health</a></li>
<li><a href="http://www.domain.com/arts-humanities.php" alt="Top 50 Arts and Humanities" title="Top 50 Arts and Humanities">Arts & Humanities</a><br><a href="http://www.domain.com/news-media.php" alt="Top 50 News and Media" title="Top 50 News and Media">News & Media</a></li>
<li><a href="http://www.domain.com/blogs.php" alt="Top 50 Blogs" title="Top 50 Blogs">Blogs</a><br><a href="http://www.domain.com/recreation-sports.php" alt="Top 50 Recreation and Sports" title="Top 50 Recreation and Sports">Recreation & Sports</a></li>
<li><a href="http://www.domain.com/business-economy.php" alt="Top 50 Business and Economy" title="Top 50 Business and Economy">Business</a><br><a href="http://www.domain.com/reference.php" alt="Top 50 Reference" title="Top 50 Reference">Reference</a></li>
<li><a href="http://www.domain.com/computers-internet.php" alt="Top 50 Computers and Internet" title="Top 50 Computers and Internet">Computers & Internet</a><br><a href="http://www.domain.com/science-technology.php" alt="Top 50 Science and Technology" title="Top 50 Science and Technology">Science & Technology</a></li>
<li><a href="http://www.domain.com/education.php" alt="Top 50 Education" title="Top 50 Education">Education</a><br><a href="http://www.domain.com/shopping.php" alt="Top 50 Shopping" title="Top 50 Shopping">Shopping</a></li>
<li><a href="http://www.domain.com/entertainment.php" alt="Top 50 Entertainment" title="Top 50 Entertainment">Entertainment</a><br><a href="http://www.domain.com/society.php" alt="Top 50 Society" title="Top 50 Society">Society</a></li>
</ul>
<div class="clear"></div>
</div>
</div></div>


Please open my site in IE7. You can see the head section is no aligned properly. I just need to straighten this out. It looks OK in FF but not IE.

Thanks for any help.

Col

 

Really is a design issue. Biggest problem is too many DIVs. Whatever is making you put that ->margin:0 0 0 -385px; is the issue. It doesn't influence the top cause you have the div#header containing it? And it looks like IE is using it while FF isnt or vice versa. Yup, I pulled the switch and it lined it up in IE 6. Screwed some other stuff up but I would fix the need for that to start with.

Also the Top 50 header is pushed down into the list of sites on IE6.

 

OK...I made some changes...it looks a little better in IE7 but still requires more tweaking. What I don't like is how the list of sites in IE7 are spaced apart too much in comparison to FF.

 

Maybe try moving the <div class="wrap">

Above the <div id="header">

And make it <div id="wrap"> and make it #wrap in the css file..

Also do not close the wrap div until the bottom of the page or right above the footer.


Do you have this in your css file?

*{
margin:0;
padding:0;
}


Also may try to get rid of this in the #wrap

position:center;
left:50%;


And use this instead to center that main page wrap

margin:0 auto 0 auto;


Boulder

 

IE6 still chews it up.
http://img3.freeimagehosting.net/uploads/a46598ae00.jpg

I would put the links|more info section into a table. Its basically tabular data so its legit.

 

You should add additional css files for IE7 (and IE6 if needed), to do so create new css files like: ie7-style.css, then put this code in your page:

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-style.css" />
<![endif]-->

HTML:

Now, in this file, you can add IE7 specific css changes, and they won't affect the look in FF or IE6. I put

#header{
padding-left: 200px;
}

HTML:

for IE7, and it fixed the header problem (of course it is better to look what's causing it, than to make a patch.. )

P.S. To fix the spacing problem between the main content, add the following css to ie7-style.css

.list_header{
height:1%;
}

.listleft{
width:700px;
}

HTML:

Oh, and btw, it's not PHP problem, it is HTML/CSS, Design problem, so you posted in the wrong section

 

OK...I made a new ie7-style.css and put the new things in. But nothing has changed. Hmmmm

 

Yes, you did make the file, but you didn't link it in your html You need to add it to your page, like you did with your main style file, so instead of

<link rel="stylesheet" type="text/css" href="style.css">

HTML:

you should have

<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-style.css" />
<![endif]-->

HTML:

Because only then the page will use it! Also, the ie7-style.css should only contain changes to the style.css, not the whole thing (you don't need to include the whole thing, it is already using main style.css) it should only have:

#header{
padding-left: 200px;
}

.list_header{
height:1%;
}

.listleft{
width:700px;
}

HTML:

 

OK...done that and most pages are working but some are not...don't know why

 

I've noticed that you added it to the wrong part of the page. This code should be within the <head></head> tags, in your case:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="description" content="Top 50 Web Sites - Rising Fast.com" >

<title>Top 50 Web Sites - Rising Fast</title>
<meta content="Top 50 Web Sites in Rising Fast" name="description"/>
<meta content="Top, Web, Sites, Rising, Fast" name="keywords"/>

<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-style.css" />
<![endif]-->
<script type="text/javascript" src="show.js"></script>
</head>

HTML:

 

YAYYYY....Thanks mate...greeens for you.

Col

 

Glad it worked

I've also noticed that the email picture/link doesn't work in IE, this can be fixed if you add

 

HTML:

in the link, like:

<div id="top"><div class="left"><a href="/"><img src="logo.png" alt="Rising Fast" title="Rising Fast"></a></div><div class="right"><a href="mailto:info@rising-fast.com" class="email">&nbsp;</a></div><div class="clear"></div></div>

HTML:

Then you need to modify style.css a little bit so the underline doesn't show in the link (add text-decoration: none; ):

a.email{
position:relative;
top:15px;
margin-right:10px;
padding:16px 8px 8px 8px;
background:url(emaildark.png) no-repeat;
text-decoration: none;
}

HTML:

Also take away onLoad="show.js" from <body> tag, it is not needed, and it gives an error in IE (you can see it in the status bar)

Good luck!