why not IE

[chrismartz]

my site http://www.martzblog.tk loads perfectly in firefox but for some reason it doesn't load correctly in IE...any css that i could add to fix this problem?

[Fang]

The menu block should be float:left;
classes: .center .centerd .centered :confused: very confusing
All span elements can be removed. You are suffering from tag/class/divitis (http://developer.apple.com/internet/webcontent/bestwebdev.html)

[chrismartz]

i'm confused now about the float:left; thing....what does that go in?

[Fang]

<div class="centerd" style="float:left;">
<ul class="centered">

[chrismartz]

that drops everything to below the blog entries......in both IE and firefox....i have left it with that style in the div so you can see what i mean @ http://www.martzblog.tk

[Fang]

Remove .centerd and
add to .centered display:inline;

[chrismartz]

now its fine in firefox but not in IE??????????????????also....how can i keep my links to the right like on index.asp but when you go to archives.asp, it moves under the content area...how can i keep it where it is no matter how tall the page is?

[Fang]

See if this layout solves the problem.
You may need to change image paths.

[chrismartz]

what exactly should I change/add to my page/css? I cann't really tell what I need to change!....all that code makes me confused!

[Fang]

It's not one thing that needs changing, but the implementation of the css.
With this template you only have to change the contents of #entries for each page and the top menu still needs to be added to #banner.

[chrismartz]

okay....got the sidebar menu working....I now need help getting my title bar at the top with my links to be looking correct in all browsers....my code is as follows...<div id="container">
<div id="banner">
<table><tr><td>
<table>
<tr><td id="logo" valign="bottom">
<p><img class="img" alt="" src="images/finish.gif" /><a href="index.asp"><img class="img" alt="Home" src="images/home.gif" /></a><img class="img" alt="" src="images/cross.gif" /><a href="about.asp"><img class="img" alt="About Me" src="images/about.gif" /></a><img class="img" alt="" src="images/cross.gif" /><a href="archive.asp"><img class="img" alt="Archives" src="images/archives.gif" /></a><img class="img" alt="" src="images/cross.gif" /><a href="results.asp"><img class="img" alt="Meet Results" src="images/results.gif" /></a><img alt="" src="images/cross.gif" /><a href="contact.asp"><img class="img" alt="Contact Me" src="images/contact.gif" /></a></p>
</td></tr></table></td></tr></table></div> <!-- end banner --> any ideas?

[Fang]

Add position:relative; to #banner and the following:
#topmenu {
position:absolute;
top:76px;
right:-7px;
}
.
.
.
<div id="banner">
<p id="topmenu"><img class="img" alt="" src="index_data/finish.gif" /><a href="index.asp"><img class="img" alt="Home" src="index_data/home.gif" /></a><img class="img" alt="" src="index_data/cross.gif" /><a href="about.asp"><img class="img" alt="About Me" src="index_data/about.gif" /></a><img class="img" alt="" src="index_data/cross.gif" /><a href="archive.asp"><img class="img" alt="Archives" src="index_data/archives.gif" /></a><img class="img" alt="" src="index_data/cross.gif" /><a href="results.asp"><img class="img" alt="Meet Results" src="index_data/results.gif" /></a><img alt="" src="index_data/cross.gif" /><a href="contact.asp"><img class="img" alt="Contact Me" src="index_data/contact.gif" /></a></p>
</div> <!-- end banner -->

You may need to change the top and right values depending on the size and position of the background image(title.gif).

[chrismartz]

is there any way to not use abslolut positioning because if the user is 800X600 it will re-align itself in a block....my code is as follows: <div id="container">
<div id="banner">
<p><img alt="" src="images/finish.gif"><a href="index.asp"><img border="0" alt="Home" src="images/home.gif"></a><img alt="" src="images/cross.gif"><a href="about.asp"><img border="0" alt="About Me" src="images/about.gif"></a><img alt="" src="images/cross.gif"><a href="archive.asp"><img border="0" alt="Archives" src="images/archives.gif"></a><img alt=""src="images/cross.gif"><a href="results.asp"><img border="0" alt="Meet Results" src="images/results.gif"></a><img alt="" src="images/cross.gif"><a href="contact.asp"><img border="0" alt="Contact Me" src="images/contact.gif"></a></p>
</div> <!-- end banner --> I also would like the title bar to be centered....sorry if i'm a pain but i'm just trying to figure this out

[Fang]

Take the title.gif out of the background (remaove all the blue on the right)
Place it:
<div id="banner">
<img class="img" alt="" src="index_data/title.gif" />
<p id="topmenu"><img class="img" alt="" src="index_data/finish.gif" /> ..... </p>
</div> <!-- end banner -->

and change:
#banner {
}
#topmenu {
float:right;
}
If necessary add margin:0 auto; to title.gif or change the width of #container.

[chrismartz]

my code for my top is: <div id="banner"></div>
<div id="topmenu">
<img alt="" src="images/finish.gif" /><a href="index.asp"><img alt="Home" src="images/home.gif" /></a><img alt="" src="images/cross.gif" /><a href="about.asp"><img alt="About Me" src="images/about.gif" /></a><img alt="" src="images/cross.gif" /><a href="archive.asp"><img alt="Archives" src="images/archives.gif" /></a><img alt=""src="images/cross.gif" /><a href="results.asp"><img alt="Meet Results" src="images/results.gif" /></a><img alt="" src="images/cross.gif" /><a href="contact.asp"><img alt="Contact Me" src="images/contact.gif" /></a>
</div> and my css for this is: #topmenu {
background:#fff url('../images/bkgtop.gif') top center repeat-x;height:27px;width:786px;text-align:right;
float:right;
}
#banner {
background:#30c url('../images/title.gif') top center;height:77px;width:786px;float: right;
} i want to center this top part that has the links such as Home and so on and also the martz swimming blog logo...how can i do this?

[Fang]

#banner {
background:#fff url('index_data/title.gif') top center no-repeat;height:77px;width:786px;float: right;
}

[chrismartz]

that doesn't do anything!

[Fang]

Show the page you have now.

[chrismartz]

my site is martzblog.tk (http://m.1asphost.com/martzblog/index.asp) I want to center the header with the Martz' Swimming blog picture and the links that are attached to that....this what you meant?

[Fang]

The title is on the background so it's position within the #banner has to be adjusted(first of the two coordinates):
#banner {
background:#fff url('swim_files/title.gif') 10px 0px no-repeat;height:77px;width:786px;
}
The float:right; has to be removed.
The top menu will have to be repositioned.

[chrismartz]

when i do #banner {
background:#fff url('../images/title.gif') 11px 0px no-repeat;height:77px;width:788px;
} it cuts off my image...why is this....the width is correct....also, what do i do for #topmenu {
background:#fff url('../images/bkgtop.gif') 11px 0px repeat-x;height:27px;width:786px;text-align:right;
} it goes to the left too far....what to do?

[Fang]

width of image + offset = 794
#banner {
background:#fff url('swim_files/title.gif') 7px 0px no-repeat;height:77px;width:794px;
}

[chrismartz]

how can i get rid of the overhang on the left, it is part of topmenu which is #topmenu {
background:#fff url('../images/bkgtop.gif') 7px 0px repeat-x;height:27px;width:793px;text-align:right;
}

[Fang]

Could you explain that or show a gif of the problem?

[chrismartz]

I have attached a screen shot and have circled what I mean in red!

[Fang]

It is the background image bkg_top.gif (not bkgtop.gif is you previously wrote) It needs to be the same length as title.gif

[chrismartz]

the file is bkgtop.gif and it is the same length....no idea what is wrong

[Fang]

repeat-x should be no-repeat
#topmenu {
background:#fff url('swim_files/bkgtop.gif') 7px 0px no-repeat;height:27px;width:793px;text-align:right;
}

[chrismartz]

thanks...didn't even notice that