Advanced Search

Results 1 to 9 of 9

Thread: Css stuffing up on webs.com (my host)

  1. #1
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Css stuffing up on webs.com (my host)

    My site is here

    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 -

    Attachment 4444
    Last edited by blurgle; 04-29-2012 at 12:32 PM.

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,627
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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.).
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  3. #3
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

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

    Attachment 4445

    Any help?

    P.s. Thanks for the suggestion Traq

  4. #4
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I'm still looking for a solution.

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

  5. #5
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,627
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    I haven't had a chance to open up windows yet, but I'll have a look sometime today.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  6. #6
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

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

    HTML

    Code:
    <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


    Code:
    #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.

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

  7. #7
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,627
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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.)
    Last edited by traq; 05-01-2012 at 03:53 AM.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  8. #8
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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)

    Attachment 4446

  9. #9
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •