CSS - Display Problems In Linux

hi, I am having problems with nav list

It displays inline on firefox but not in IE..but I can not see why? any ideas??

thanks

PHP Code:
/* NAV */

    #nav {
        width: 420px;
        height: 70px;
        float: right;
        margin: 0;
        padding: 0;
    }

    #nav li.on ul, #nav li.off ul {
        margin: 0;
        padding: 0;
    }

    #nav a {
        text-decoration: none;
    }

    #nav li { /*float the main list items*/
        margin: 0;
        float: right;
        display: inline;
        padding-right: 0px;
        background: url(../images/pipe.gif) no-repeat;
        background-position: 0 10px;
    }

    .noback {
        background: none;
    }

    #nav li ul {
        display: none;
        float: right;
    }
    
    #nav li.off ul, #nav li.on ul { /*put the subnav below*/
        position: absolute;
        top: 88px;
        *top: 104px;
        left: 503px;
        padding-top: 10px;
        height: 28px;
        width: 420px;
    }

    #nav li a {
        color: #155089;
        font-size: 20px;
        display: block;
        height: 15px;
        padding: 10px;
        
        background-position: 0 10px;
    }

    #nav li.on a {
        color: #000;
        background-position: 0 10px;
    }

    #nav li.on ul a, #nav li.off ul a {
        float: left; /*ie doesn't inherit the float*/
        border: 0;
        color: #C1D1E0;
        width: auto;
        margin-right: 0px;
        font-size: 18px;
        line-height: 0px;
        background: none;
    }

    #nav li.on ul {
        display: block;
        background: none;
    }

    #nav li.off:hover ul {
        display: block;
        z-index: 6000;
        background: #fff;
    }

    #nav li.off a:hover, #nav li:hover a {
        color: #000;
        background: #fff;
        background: url(../images/pipe.gif) no-repeat;
        background-position: 0 10px;
    }

    #nav ul li.off a:hover, #nav ul li:hover a {
        color: #000;
        background: none;
    }
    
    ul#nav li.off ul li, ul#nav li.on ul li {
        background-image:none;
    }
    
    ul#nav li.off ul li a:hover, ul#nav li.on ul li a:hover {
        background-image:none;
    }
    
    ul#nav li.on a.nopipe, ul#nav li.off a.nopipe {
        background-image:none;
    }

    /* END OF NAV */ 





and the html

PHP Code:
<div id="divnav">
        
        <ul id="nav">
        
        <li class="off"><a href="#">contact</a></li>
        
        <li class="off"><a href="#">products</a>
            <ul>
            <li><a href="#">testemonials</a></li>
            <li><a href="#">samples</a></li>
            </ul>
        </li>
        
        <li class="off"><a href="#">about us</a>
            <ul>
            <li><a href="#">processes</a></li>
            <li><a href="#">plant list</a></li>
            <li><a href="#">benefits</a></li>
            <li><a href="#">features</a></li>
            </ul>
        </li>
        
        <li class="on" style = "background-image:none;"><a href="#" class = "nopipe">home</a></li>
        
        </ul>
        
        </div> 





thank you

Need assistance determining the cause of the various display issues in IE as indicated by this screen shot from 'browsershots.org':

http://www.mandgweb.net/efw_php/cbc/bs_ss1.png

particularly

a) the pushing down of the main content and obstruction of the background image
b) the explosion occurring in the 'free trial' sidebar (excessive padding, non-centered)

I am not properly set up to test all platforms/browsers and have reviewed and attempted various solutions and reloading to 'browsershots' to try them.

Actual site pages he

http://www.mandgweb.net/efw_php/emp...rds_program.php

CSS: http://www.mandgweb.net/efw_php/css/efw.css

Pages display as intended on:
Mac OSX 10.6.8 on
Firefox/3.6.19
Safari Version 5.1 (6534.50)
Chrome 13.0.782.112

Windows XP Pro (Version 2002)
Firefox/4.01
Chrome 11.0.696.65

Thank you in advance for your assistance.

Hi guys,

Please help. Im very confused as to why setting display:inline in my CSS is giving me grief with text "breaking out" of the list element in FireFox???. If I give the li element a background colour clearly I can see that the text is outside the boundaries of the li element. However, if I used display:block and float:left the li item ecompasses the text just fine.

My CSS is below. Thankyou in advance




Code:

#navcontainer {
	margin-left: 30px;
}
#navlist{
	list-style: none;
	padding: 0;
	margin: 0;
}
#navlist li {
	display: inline;
	border-right: 1px solid #000;
	padding: 0 0.4em 0 0.4em;
	margin: 0 0.4em 0 -0.4em;
}

/*Win IE browsers - hide from Mac IE\*/
* html #navlist li
{
	display: block;
	float: left;
}
#navlist li a{
	font-family: Garamond, "Garamond-Normal", Georgia, "Times New Roman", Times, serif;
	font-size: 200%; /* set the font size for p, scaled from the body declaration */
	text-decoration:none;
}

#navlist a:link,  #navlist a:visited{
	color: #666;
}     /* unvisited link */
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover {
 	color: #000;
	
}

I'm trying to update my main navigation bar for my site into a something a bit more useful and clean. I've gotten it to work pretty much exactly as I want to in FF and Opera, but of course it's displaying very wrong in IE.

I thought I had found the code needed to fix IE, but I've either used it incorrectly, or it's just not the right bit of code.

Here's a page with the navbar live:
http://www.skullcrow.com/community_upload.php

Here's the css being used:
Code:

/* horizontal drop down navbar - basic formatting */
#centering_wrap {width:100%; position:relative;}
#menu {margin:0 auto;width: 955px;font: bold 11px/16px arial, helvetica, sans-serif;color:#666;} /* Main width and default font properties */
#menu ul {list-style: none;margin: 0;padding: 0;float: left; line-height:42px;} /* Main format for top categories */
#menu ul ul{ position:relative; top:35px; left:5%; width: 90%;} /* child element widths */

#menu ul li{ background-position:bottom left;} /* set nav bg position */
#menu ul li:hover{ background-position:top left;} /* set nav bg position hover position */

/* Positioning popouts (2nd level only) */
#menu li {position: relative;} /* make "ABSOLUTE" work correctly */
#menu ul ul {position: absolute; z-index: 500;} /* prevent menu from "pushing" contents down */
#menu ul ul ul {position: absolute; top: 0; left: 100%;} /* move child elements to the side */

/* Hover behavior */
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

/* Additional text formatting */
#menu a {display: block;width: 100%;height: 100%;}

#menu ul ul li {
font: bold 11px/16px arial, helvetica, sans-serif;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #ccc #323E6B #456594 #323E6B ;
margin: 0;
padding: 3px 4px;
background: #2B3344;
}
#menu ul ul a {color: #CCC;text-decoration: none;}

#menu ul ul a:hover {color: #FFF;background:#06F;}

...and here's the html from the menubar (which is contained in a separate php.includes, if that matters at all):
Code:

<div id="centering_wrap">
<div id="menu">

<ul style="width:195px;">
  <li style="background-image:url(../images/nav_com_home.png);"><a href="http://www.skullcrow.com/" alt="Home">&nbsp;</a>
    <ul>
	  <li><a href="http://www.skullcrow.com/">Storefront</a></li>
      <li><a href="http://www.skullcrow.com/community_home.php">Community</a></li>
	</ul>
  </li>
</ul> 
  
<ul style="width:188px;">
  <li style="background-image:url(../images/nav_com_store.png);"><a href="http://www.skullcrow.com/" alt="Store">&nbsp;</a>
    <ul>
	  <li><a href="http://www.skullcrow.com/">Shirts</a></li>
      <li>Hats</li>
	  <li>Stickers</li>
	  <li>Misc Stuff</li>
	</ul>
  </li>
</ul>

<ul style="width:188px;">
  <li style="background-image:url(../images/nav_com_community.png);"><a href="http://www.skullcrow.com/community_home.php" alt="Community">&nbsp;</a>
    <ul>
	  <li><a href="http://www.skullcrow.com/forum">Forum</a></li>
      <li><a href="http://www.skullcrow.com/community_upload.php">Upload Photos</a></li>
	  <li><a href="http://www.skullcrow.com/community_designers.php">Submit Shirt Designs</a></li>
	  <li><a href="http://www.skullcrow.com/skullcrow_blog">SkullCrow Blog</a></li>
	</ul>
  </li>
</ul>

<ul style="width:188px;">
  <li style="background-image:url(../images/nav_com_help.png);"><a href="http://www.skullcrow.com/help.php" alt="Help">&nbsp;</a>
	<ul>
	  <li><a href="http://www.skullcrow.com/help.php">Contact Us</a></li>
	  <li><a href="http://www.skullcrow.com/forum/faq.php">FAQ</a></li>
	  <li><a href="http://www.skullcrow.com/aboutus.php">About Us</a></li>
	</ul>
  </li>
</ul>

<ul style="width:196px;">
  <li style="background-image:url(../images/nav_com_otherstuff.png);"><a href="#" alt="Other Stuff">&nbsp;</a></li>
</ul>

</div>
</div>

...and finally, here's the small snippet of code I used up in the header of the main php file that I thought was suppose to fix the display issue but didn't:
Code:

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(css/csshover3.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->

That last bit is contained at the very of the header, and is the very last item before the </head> tag. In addition to the other 'adjustments', it's also suppose to be including the csshover3.htc file that I thought was suppose to fix a lot of display problems. The site I got that file from is he http://www.xs4all.nl/~peterned/csshover.html

Whatever help is always very appreciated. I'm still sort of a css newb, although I think I'm starting to understand more, but IE is a bastard and I think most web developers would probably agree.

Thanks again.

Thanks for your time. Still learning design, so thanks for your help if they are easy solutions.

Border Issue:
In IE and FF I have a complete border on a few header div's. The bottom and top border is different color than the left and right borders. You can see that the dark brown bottom and top borders appear to lay overtop of the white left and right borders.

Website is he
http://onlinecasinoboss.true2formde...e.php?page=home

Styling CSS is he
http://onlinecasinoboss.true2formde...aster-style.css

Layout CSS is he
http://onlinecasinoboss.true2formde...ster-layout.css

IE Layout Issue:

In FF the three center content columns display how I want it to look. When you view the same home.html page in IE you can see that they don't space out how I'd like. It is most visible by compairing the boxes on the right of the center content.

Thanks a ton for your time and help, I appreciate it.

hello. i have a horizontal menu, which contains a static horizontal menu underneath one of the items depending on where you are in the site. so, this box needs to be exactly the same width as the list items and anchors inside of it. the problem is, using Arial, Helvetica, sans-serif, is that in Linux, it ends up being wider than in Win/Mac. Can i either, make the ul automatically the width of the containing list items, or set a linux font of equal width to arial?

I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container.

Anyone know why there is a shift, and what I can do about it?



Style sheet code pasted below:

Code:

body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3; 
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}

h2 {
font-size:2em;
}

h3 {
font-size:1.5em;
}

h4 {
font-size:1.25em;
}





a:link {
color:#8090AC;
text-decoration:none;
}

a:visited {
color:#B17F6C;
text-decoration:none;
}

a:hover {
color:#E9DF55;
text-decoration:underline;
}

a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}

#header {
height:200px;
width:760px;
margin:0;
padding:0;
}

#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
	font-size: 12pt;
	color: #e9df55;
	background-color:transparent;
	text-indent: 200pt;
	vertical-align: text-bottom;
}
navigate{
	color : #105BAC;
	background-color : transparent;
	height : 20px;
	font-size: 100%;
	border-top : 1px solid #999999;
}

#navigate ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 0px;
	padding: 2px 0 0 0;
}
#navigate ul li {
	display: inline;
}
td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
p {
	font-size: 14px;
	color: #FFFFFF;
	left: 50px;
	right: 50px;
}



#main {
	width: 660px;
	padding-right: 50px;
	padding-left: 50px;
}
#footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #666666;
	height: 100px;
	width: 760px;
	vertical-align: text-bottom;
	text-align: center;
	
}

#SplashImage {
	float: left;
}
.image-left {
	clear: none;
	margin-bottom: 10px;
	float: left;
	margin-right: 20px;
	margin-left: 10px;
}
.image-right {
	clear: none;
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
}

I've been seeing people using ul and li tags to make their menus in css.

So I've started trying to do the same, here is an example.

But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working?

How can I get this to work or is there any other way to get a ul li menu to display this way?

Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either.

http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm

Hi!

Is is vicious to display a table as "display: block" to force margin-collapsing?

Otherwise there's no margin collapsing with other elements.

Thanks

I'm having a problem with CSS in IE8. I'm designing a page in C# that I want to have tabs, and found a template that I made compatible with ASP.NET (albeit a bit messily). I need this to look good in Firefox 3, IE8, and Safari, and while it looks great in FF3 and Safari, IE8 is having some problems. Is there a quick hack to make it IE quality that anyone can figure out? I've been trying for awhile but I'm stumped...

The HTML/ASP.NET is:

<div id="tabbar">
<ul>
<asp:Panel ID="Panel1" runat="server" CssClass="tabitemLSel"><a><asp:LinkButton ID="LinkButton1" OnClick="ChangeView" CssClass="tabitemRSel" runat="server" Text="Live Questions" /></a></asp:Panel>
<asp:Panel ID="Panel2" runat="server" CssClass="tabitemL"><a><asp:LinkButton ID="LinkButton2" OnClick="ChangeView" CssClass="tabitemR" runat="server" Text="Ask a Question" /></a></asp:Panel>
<asp:Panel ID="Panel3" runat="server" CssClass="tabitemL"><a><asp:LinkButton ID="LinkButton3" OnClick="ChangeView" CssClass="tabitemR" runat="server" Text="Answered Questions" /></a></asp:Panel>
</ul>
</div>

and the CSS is:

#tabbar {
float:left;
width:100%;
/*background:#DAE0D2 url("bg.gif") repeat-x bottom;*/
background: url("bg2.gif") repeat-x bottom;
font-size:14px;
line-height:normal;
}

#tabbar ul
{
padding:10px 10px 0;
list-style:none;
}

#tabbar a:hover {
color:#333;
}

.tabitemL {
float:left;
background:url("left.gif") no-repeat left top;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 9px;
}

.tabitemR {
float:left;
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}

.tabitemLSel {
float:left;
background:url("left_on.gif") no-repeat left top;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 9px;
border-bottom: solid 1px white;
}

.tabitemRSel {
float:left;
display:block;
background:url("right_on.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color: #333;
}

hi, sorry for the non descriptive subject but i couldn't figure out what to say.

I'm having two problems with my site, neither major but I would like to get them working. First off and more serious, I have the infamous 3px jog in IE, but for some reason the holly hack isn't fixing this one. site is at http://seektheeout.com/heroes/ if you want to see, its between the menu and the main window. rollover the menu to make it stand out more. I did figure out one method of fixing it, which was to add Code:

_position: relative; left: -3px;

to that item in the CSS, but thats an unpopular hack and i don't know how other browsers than IE and FireFox treat it. any thoughts on how to make the holly hack or something else easy work?

2nd problem, I would like to have the image on the right about halfway in between the 2 paragraphs. so it would look something like this: Code:

texttexttexttexttexttexttext
texttexttexttexttexttexttext
texttexttexttext
texttexttexttext
texttexttexttext

texttexttexttext
texttexttexttext
texttexttexttext
texttexttexttext
texttexttexttexttexttexttext
texttexttexttexttexttexttext

is this possible? I tried putting a margin-top on the image, it moved it correctly but doesn't re-adjust the text to cover the white space. any suggestions appreciated!

Well here is the layout.. http://monarkstudios.ca/peter/

body_txt should be at the same top position as body_menu_txt.

On IE7 the layout turns out perfect (besides the above problem), but on Firefox the body tag kinda cuts out.

And lastly on IE6, it just looks messed entirely...

http://monarkstudios.ca/peter/screeen.jpg - IE6
http://monarkstudios.ca/peter/screen.JPG - IE7
http://monarkstudios.ca/peter/screenff.JPG - Firefox

I've been trying to solve these problems for quite sometime now, and just gave up.

Any help is appreciated.

Thanks,
Peter

http://tinyurl.com/5wgx4s

The first problem is that in IE the header menu does not go straight across, instead it does down the page like stairs. How do I fix this?

Secondly, on the products page, why are the bullet points behind the text?

Thanks