Css stuffing up on webs.com (my host)

[blurgle]

My site is here (http://amy-hadland.webs.com/index.html)

It works fine on my computer, but when I upload it to my site and look at it, the navmenu is all over the place...

Any help?

It should look like this -

4444

[traq]

looks fine to me, both on Fx and chrome.

Incidentally, I would recommend against using a percentage size (at least, such a small percentage) for your menu #link* width. The menu text gets cut off when the #link* is too small. It would be better to allow the width to be determined automatically (i.e., by the text width/padding/etc.).

[blurgle]

When I open it in ie9 (online) it looks like this -

4445

Any help?

P.s. Thanks for the suggestion Traq

[blurgle]

I'm still looking for a solution.

I've noticed I get a similar problem when I remove the doctype from the page?????

[traq]

I haven't had a chance to open up windows yet, but I'll have a look sometime today.

[itivae]

Try containing link1-link4 in a div and then floating link1-4 (you really only need 1-3) to the left

HTML


<div class="hoznav">
<DIV style="BACKGROUND-COLOR: lightgrey" id="link1" onmouseover=mouseover(this) onmouseout=mouseout(this) onclick="focused('link1','link2','link3','link4')">Home</DIV>
<DIV style="BACKGROUND-COLOR: grey" id="link2" onmouseover=mouseover(this) onmouseout=mouseout(this) onclick="focused('link2','link3','link4','link1')">About</DIV>
<DIV style="BACKGROUND-COLOR: grey" id="link3" onmouseover=mouseover(this) onmouseout=mouseout(this) onclick="focused('link3','link4','link1','link2')">Portfolio</DIV>
<DIV style="BACKGROUND-COLOR: grey" id="link4" onmouseover=mouseover(this) onmouseout=mouseout(this) onclick="focused('link4','link1','link2','link3')">Contact</DIV></div><BR>

<DIV id=body1>&nbsp;
<DIV id=line1></DIV>
<DIV id=title>Home</DIV>
<DIV style="WIDTH: 50%; FLOAT: left" id=text>Home text here</DIV>
<DIV style="FLOAT: right" id=image></DIV><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR></DIV>


CSS




#link1 {
float:left;
margin-right:2px;
}

#link2 {
float:left;
margin-right:2px;
}

#link3 {
float:left;
margin-right:4px;
}



I would make a specification to use this override only if the browser is IE. Something like this may work.


<!--[if IE]>
<link rel="stylesheet" type="text/css" href="path/to/my/ie-only.css" />
<![endif]-->

[traq]

add zoom: 1; *display: inline; to the css for each menu link.

changing the markup and using floats would work, but shouldn't be necessary.

You experience this problem in IE9? It appeared correctly in both IE9 and IE8 when I checked.
This should only be an issue in IE 6/7.

(What's happening is that IE<8 does not apply "inline-block" to elements that are naturally block-level (e.g., <div>). The solution is to give the element "hasLayout" (the simplest was is to use "zoom") and then set it to display "inline" (using the *hack to hid it from modern browsers), which magically has the same effect as "inline-block" is supposed to. More info here (http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/).)

[blurgle]

Thanks guys for the help, I've fixed that problem now...

I've now changed the design a bit and noticed that more of the css isn't working...

It should look like this - (IE9)

4446

[blurgle]

I'm still experiencing this problem, but only in IE9 and when it's online. Can anyone help me?