why not IE

@chrismartzOct 10.2004

my site ~~[URL=http://www.martzblog.tk]~~http://www.martzblog.tk[/URL] 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?

to post a comment

CSS

28 Comments(s) _↴

@FangOct 10.2004 — #The menu block should be [I]float:left;[/I]

classes: .center .centerd .centered ? very confusing

All span elements can be removed. You are suffering from [URL=http://developer.apple.com/internet/webcontent/bestwebdev.html]tag/class/divitis[/URL]

@chrismartzauthorOct 10.2004 — #i'm confused now about the float:left; thing....what does that go in?

@FangOct 10.2004 — #

&lt;div class="centerd" style="float:left;"&gt;
 &lt;ul class="centered"&gt;

@chrismartzauthorOct 10.2004 — #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 @ [URL=http://www.martzblog.tk]http://www.martzblog.tk[/URL]

@FangOct 10.2004 — #Remove .centerd and

add to .centered display:inline;

@chrismartzauthorOct 10.2004 — #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?

@FangOct 11.2004 — #See if this layout solves the problem.

You may need to change image paths.

@chrismartzauthorOct 12.2004 — #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!

@FangOct 13.2004 — #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.

@chrismartzauthorOct 14.2004 — #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...

[CODE]<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 -->[/CODE]

any ideas?

@FangOct 14.2004 — #Add position:relative; to #banner and the following:

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

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

@chrismartzauthorOct 14.2004 — #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:

[CODE]<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 -->[/CODE]

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

@FangOct 14.2004 — #Take the title.gif out of the background (remaove all the blue on the right)

Place it:

 &lt;div id="banner"&gt;
 &lt;img class="img" alt="" src="index_data/title.gif" /&gt;
 &lt;p id="topmenu"&gt;&lt;img class="img" alt="" src="index_data/finish.gif" /&gt; ..... &lt;/p&gt;
 &lt;/div&gt; &lt;!-- end banner --&gt;

and change:

#banner {

}

#topmenu {

float:right;

}

If necessary add [i]margin:0 auto;[/i] to title.gif or change the width of #container.

@chrismartzauthorOct 15.2004 — #my code for my top is:

[CODE]<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>[/CODE]

and my css for this is:

[CODE]#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;
 }[/CODE]

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?

@FangOct 16.2004 — ##banner {

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

}

@chrismartzauthorOct 16.2004 — #that doesn't do anything!

@FangOct 16.2004 — #Show the page you have now.

@chrismartzauthorOct 16.2004 — #my site is [URL=http://m.1asphost.com/martzblog/index.asp]martzblog.tk[/URL] I want to center the header with the Martz' Swimming blog picture and the links that are attached to that....this what you meant?

@FangOct 16.2004 — #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.

@chrismartzauthorOct 16.2004 — #when i do

[CODE]#banner {
 background:#fff url('../images/title.gif') 11px 0px no-repeat;height:77px;width:788px;
 }[/CODE]

it cuts off my image...why is this....the width is correct....also, what do i do for

[CODE]#topmenu {
 background:#fff url('../images/bkgtop.gif') 11px 0px repeat-x;height:27px;width:786px;text-align:right;
 }[/CODE]

it goes to the left too far....what to do?

@FangOct 16.2004 — #width of image + offset = 794

#banner {

background:#fff url('swim_files/title.gif') 7px 0px no-repeat;height:77px;width:794px;

}

@chrismartzauthorOct 16.2004 — #how can i get rid of the overhang on the left, it is part of topmenu which is

[CODE]#topmenu {
 background:#fff url('../images/bkgtop.gif') 7px 0px repeat-x;height:27px;width:793px;text-align:right;
 }[/CODE]

@FangOct 17.2004 — #Could you explain that or show a gif of the problem?

@chrismartzauthorOct 17.2004 — #I have attached a screen shot and have circled what I mean in red!

[upl-file uuid=df285d0a-2ecc-4645-b678-e5188e919283 size=65kB]help.gif[/upl-file]

@FangOct 17.2004 — #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

@chrismartzauthorOct 17.2004 — #the file is bkgtop.gif and it is the same length....no idea what is wrong

@FangOct 17.2004 — #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;
 }

@chrismartzauthorOct 17.2004 — #thanks...didn't even notice that

Also in #CSS _↴

Header size problem?[RESOLVED] Simple Centering Issue rounded box border

Success!

Help @chrismartz spread the word by sharing this article on Twitter...

Tweet This

why not IE

28 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

why not IE

28 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

28 Comments(s) _↴

Also in #CSS _↴