CSS - Want No Underlines... I'm Missing Something Here...

I'm having a big problem with IE5/Win... my navigation menu and footer divs (which also contains a few links) are both MIA in IE5! I'd say once every four or five page refreshes will load the page as it should be loaded. Checking the source reveals the correct code regardless of whether my navigation shows up or not. Has anyone ever heard of this problem? I don't want to give a URL or source code, but I will say that the setup of the page is pretty standard:

<div id="header"> ... </div>
<div id="container">
<div id="navigation"> ... </div>
<div id="content"><div id="spacer"> ... </div></div>
<div id="footer"> ... </div>
</div>

hey all,

i'm kinda stumped on this one.

Take a look at that page in FF and it's all good, but in IE, all the content on the left side of the content box is missing. Don't know what's causing it.

here're the styles.

[edit]it seems the form doesn't show up on the contact page in IE either.[/edit]

Any help'd be appreciated.

When I view the segment below, I can't see the background image in Fx (Win32 and IceWeasel), however when I view it when editing the CSS in Chris Pederick's Web Developer Toolbar, it's there.

I know it's probably something really stupid that I've overlooked, but if someone could point me in the right direction, I'd be grateful


Code:

.tuesday { 
background-image: url('images/tu.jpg');
}

Code:

<div class=tuesday> blah blah </div>

Hello All,

I'm working on this site at the moment:
http://www.whitecapgraphics.com/APP

Unfortunately I seem to be missing the drop down menus in IE6. Can anyone explain why?

(No, I haven't made it standards compliant yet and I am aware that the png is not transparent in IE6. Aside from that feel free to pick on me for anything else, I take criticism well.)

CSS:
Code:

* {margin:0; padding:0;}
body {
	background-image:url(images/background.gif);
	color:#450109;
}
a {
	color:#450109;
	text-decoration:none;
	font-weight:bold;
	font-variant:small-caps;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:.9em;
}
a:hover {
	color:#D6970C;
	text-decoration:overline underline;
}

div#main {
	background-color: #FFFFFF;
	margin: auto;
	width: 95%;
	border-width: 0px 5px 0px 5px;
	border-style: solid;
	border-right-color: #450109;
	border-left-color: #D6970C;
	border-bottom:15px solid #450109;
}
#main #logo {
	background-image:url(images/logo.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	background-color:#71001E;
}
#main #leftflourish {
	float:left;
}
#main #rightflourish {
	float:right;
}
div#navigation {
	background-color:#400000;
	float: right;
	margin: 0;
	width: 100%;
	min-height: 24px;
}
div#navigation ul {
	margin-left: 193px;
	padding-left: 5px;
	padding-right: 5px;
}
div#navigation ul li {
	background-color: #400000;
	float: left;
	list-style-type:none;
	width: 25%;
	position: relative;
	z-index:99;
}
div#navigation a {
	text-decoration:none;
	font-variant:normal;
	color: #DFCDB6;
	text-align:center;
	display: block;
	width: 100%;
	line-height: 25px;
	font-family: serif;
	font-size:1.1em;
	font-weight:normal;
}
div#navigation a:hover {
	color: #FFCC00;
}
div#navigation ul li ul {
	width: 90%;
	padding: 0;
	margin:0;
	margin-left:5%;
	margin-right: 5%;
	position:absolute;
	display: none;
}
div#navigation ul li ul li {
	width: 100%;
}
/* shows drop down on hover */
div#navigation ul li:hover ul, div#navigation ul li ul:hover {display:block;}

div#lcolumn {
	width: 190px;
	float: left;
	margin: 0;
	padding: 0;
	position: relative;
	top: -66px;
	z-index:999;
}
div#lcolumn ul li {
	list-style-type:none;
	text-align:center;
	width: 167px;
	padding-bottom: .1em;
}
#main #body #lcolumn ul li a {
	background-image: url(images/yapdropback.jpg);
	display: block;
	background-repeat: no-repeat;
	min-height: 24px;
	color:#DFCDB6;
	text-decoration:none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:.9em;
	line-height: 24px;
	letter-spacing: -.02em;
	font-variant:small-caps;
}
#main #body #lcolumn ul li a:hover {
	color: #ffcc00;
}
#main #body #lcolumn #featureContent {
	padding-top: 24px;
}
#main #body #lcolumn #featureContent div{
	padding-right: 30px;
	padding-top: 60px;
	background-image: url(images/featuresback.jpg);
	background-repeat: no-repeat;
}
#main #body {
	background-image:url(images/chaser.jpg);
	background-position:bottom right;
	background-repeat:no-repeat;
	position: relative;
	margin-bottom:3em; /*1.25 + 1.75*/
	clear:both;
}
#main #body #content {
	padding-left: 200px; /*fix for IE - it's including from side of L Column*/
	position: absolute;
	top: 48px;
	z-index:1;
}
h1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 1.5em;
	line-height:1.1em;
	text-transform: uppercase;
	color: #350000;
	width: 50%;
}
#main #body #content div ul li {
	float: right;
	list-style-type:none;
	padding-left: 2%;
	top: .4em;
	line-height:2.2em;
	display:block;
	font-weight:bold;
}
h2 {
	position:relative;
	width: 98%;
	background-image:url(images/navback.jpg);
	background-repeat:repeat-x;
	padding-top:1%;
	font-family: "Times New Roman", Times, serif;
	font-size: 1.2em;
	text-indent: 2em;
}
#main #body #content div ul {
	width: 46%;
	position: absolute;
	top: .4em;
	right:0;
	padding-right:4%;
}
h1:first-letter {
	font-size: 1.7em;
}

#content p {
	padding: 2em;
}

#main #footer {
	text-align: center;
	position:relative;
	top: -1em;
}

/* Aslett Clearing Method */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {display: inline-table;}
/* backslash hack hides from IE mac \*/
* html .clearfix {height: 1%;}
* html #main #body #content {padding-left:0px; width:78%;}
.clearfix {display:block;}
/* end backslash hack */

Hi everyone!

I am having a problem with some missing colours and images in firefox.

I have validated my XHTML 1.0 and CSS as OK. It looks correct in IE 6.0 but not in FF, i am sure someone will know the answer straight away!


address is http://www.wellandpower.net

charlie

When printing pages from this site http://www.sorensteensen.dk/kvl/ one or two lines disappear when the pages break.

I have no idea why. Anyone knows about it?

Soren Steensen

I got the following, which is perfectly displayed in IE:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<title>Untitled</title>
	<style type="text/css">
      #container { overflow: hide; }
      #container .content { float: left; margin: 0px 0px -2000px 0px; padding: 0px 0px 2000px 0px; }
	</style>
</head>

<body>
<div style="width:585px;overflow:hidden;" id="container">
<div style="width:585px;height:9px;background-image: url(images/product/mid_top2.gif);background-repeat:no-repeat;padding:0px;float:left"></div>
<div class="content" style="width:1px;background-image: url(images/product/mid_back_edge2.gif);background-repeat:repeat-y;clear:both"></div> <!-- div missing in FF --->
<div class="content" style="width:583px;background-image: url(images/product/mid_back2.gif);background-repeat:repeat-x;">
content goes here..
</div>
<div class="content" style="width:1px;background-image: url(images/product/mid_back_edge2.gif);background-repeat:repeat-y;float:left"></div>
<div style="width:585px;height:7px;background-image: url(images/product/mid_bottom2.gif);background-repeat:no-repeat;clear:both;float:left"></div>
</div>
</body>
</html>

But the div at the left-side (see comment) is just not shown in Firefox. Can anyone explain why?

Guys,

In IE, when I hover over a folder menu, the text in its sub-menu is missing.

The entire navbar works fine in both Firefox and Chrome. Any suggestions?

HTML PART:

Quote:
<!-- Start of Navbar header -->
<div id="header">
<div id="lgo"><a href="index.html"><strong>RIVER rafting</strong></a></div>
<ul class="menu">
<li><a href="index.htm" id="m1" class="act">home</a></li>
<li><a href="locations.htm" id="m2">Locations</a>
<ul id="me2">
<li><a href="locations.htm">Hiranandani</a></li>
</ul>
</li>
<li><a href="corporateevents.htm" id="m3">Corporate Events</a>
<ul id="me3">
<li><a href="corporateevents.htm#activities">Activities</a></li>
<li><a href="corporate-events/locations.htm">Outbound Locations</a></li>
<li><a href="corporate-events/goals.htm">Goals</a></li>
</ul></li>
<!-- <li><a href="index-3.html" id="m4">news</a></li> -->
<li><a href="equipmentsales.htm" id="m5">Equipment Sales</a>
<ul id="me5">
<li><a href="equipment-sales/markers.htm">Paintball</a></li>
<li><a href="equipment-sales/atvs.htm">ATVs</a></li>
<li><a href="equipment-sales/zorbing.htm">Zorbing</a></li>
</ul>
</li>
<li><a href="aboutus.htm" id="m6">About Us</a>
<ul id="me6">
<li><a href="about-us/contactus.htm">Contact Us</a></li>
<li><a href="aboutus.htm">About Headrush</a></li>
<li><a href="about-us/media.htm">Media</a></li>
<li><a href="about-us/corporateclients.htm">Corporate Clients</a></li>
</ul></li>
</ul>
</div>
<!-- End of Navbar -->


The CSS IS:

Code:

ul.menu {
	position:absolute;
	top:135px;
	left:0;

	width:327px;
	height:300px;
}
ul.menu li:hover > ul  {
 visibility: visible;
}
ul.menu ul {
 visibility: hidden;
 position: absolute; 
 width: 80%;
 height:80%;
 top: 1px;
}
ul.menu ul li {
 float: none;
 background-position: 0px 46px;
 font-size:0.4em;
 line-height:31px;
 padding:0 0 0 15px;
}


ul.menu ul li a:hover {
	text-decoration:underline;
}
	ul.menu li {
		width:100%;
		overflow:hidden;
		height:50px;
	}
		ul.menu li a {
			display:block;
			font-size:4.0em;
			line-height:57px;
			text-transform:uppercase;
			text-decoration:none;
			letter-spacing:0px;
			background:url(images/menu_bg.png) no-repeat top left;
			color:#000;
			padding:0 0 0 25px;
			height:53px;
			margin:-3px 0 0 0;
		}
		a#m1 {
			width:327px;
			background-position: 0 -103px;
		}
		ul#me1 {
 		top: 1px;
 		left: 40%;
		}

		a#m2 {
			width:327px;
			background-position: 0 -86px;
		}
		ul#me2 {
 		top: 45px;
 		left: 55%;			
		width:150px;
		}
		a#m3 {
			width:327px;
			background-position: 0 -6px;
		}
		
				ul#me3 {
 		left: 85%;
		top: 13px;
		width:180px;
		}
		a#m4 {
			width:327px;
			background-position: 0 -46px;
		}
		a#m5 {
			width:327px;
			background-position: 0 -6px;
		}

		
		ul#me5 {
 		left: 80%;
		top: 50px;
		width:130px;
		}
		a#m6 {
			width:327px;
			background-position: 0 -163px;
		}
		ul#me6 {
 		left: 55%;
		top: 45px;
		width:180px;
		}
		a:hover#m1, a.act#m1 {
			width:327px;
			background-position: -327px -103px;
		}
		a:hover#m2, a.act#m2 {
			width:327px;
			background-position: -327px -86px;
		}
		a:hover#m3, a.act#m3 {
			width:327px;
			background-position: -327px -6px;
		}
		a:hover#m4, a.act#m4 {
			width:327px;
			background-position: -327px -46px;
		}
		a:hover#m5, a.act#m5{
			width:327px;
			background-position: -327px -6px;
		}
		a:hover#m6, a.act#m6{
			width:327px;
			background-position: -327px -163px;
		}

Thanks

I have a div with a solid white background color, normally the background continues behind other elements inside the div however if the other elements are floating the background disappears, anyone know how to solve this problem? Thanks in advance!

Code:

 example with background; http://ourbrooklyndentist.com/  

loses background; http://ourbrooklyndentist.com/indexx.shtml

Not sure if this is really a CSS problem but...

In IE only, the bottom pixels are missing from some images. It's fine in Firefox though: Example

The images in quesiton are the Zodiac and 13 Moon images (underneath the avatar).

Anyone know what might cause this?

Thanks,

pls refer to:

http://www.myshops.com.sg/atomio/
http://www.myshops.com.sg/atomio/screen.css

Spent all night trying to solve two problems.

1. When mouse over the second image, the weird spacing disappeared. It doesn't happen for the first or third image, although I just duplicate the DIV code.

2. Height:100% for the side color boxes doesn't seen to be working after a certain length?

Thanks.

I have an extremely weird problem with the formatting on my web player on a website I am creating. Its not the player, but I can't seem to figure out whats going on precisionstudiollc(dotcom)/index_mub(dot)html . In Mozilla the text in the web player works renders fine, in ie 7, the text gets cut off or doesn't render correctly...Any ideas?

Hello. i have a list. something like
<ul><li>blah</li>....</ul>

i want to create a fixed width UL. of say. 300px. and have each LI be 150px. so i wind up with two columns of links. i float them left. and i achieve what i want.

the only problem is the discs/bullets are gone.
any help is appreciated.

my rules are along the line of:

ul
{ padding: 0; margin: 5px 0 0 0; list-style-type: disc; list-style-position: inside;}
ul li
{ width: 150px; float: left; }

I am having a css issue with IE 6 showing a gap in mambo template however this does not appear in Firefox and the site looks perfect viewing in Firefox..

Over at http://www.stlaware.com and look at the weather box on the left side of the site if your using IE you will see a white gap I would say maybe 200ish pixel width on the right side of the weather box which I don't want any spaces or padding around the box but padding: 0px or margin: 0px doesn't seem to fix it.

If you have both browser compare it in IE and Firefox and you'll see what I mean .. also on the right of the site is a random image and it also have the gap on each side of the image which is not seen in Firefox either

Any way to correct this gap and make it disappear in IE?

I am sorta a newbie in css but I am fast learner

Here the part of index.php

html table where the weather resides in ..
Quote:
<tr>
<td width="112" height="34"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_43.png" width="118" height="34" hspace="0" vspace="0" border="0"></td>
<td width="100%" background="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_27.png">&nbsp;</td>
<td width="10" align="right"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_30.png" width="7" height="34"></td>
</tr>
<tr align="left">
<td height="15" colspan="3" class="mainWindow"><?php mosLoadModules ( 'left' ); ?></td>
</tr>



and the right side table where random image reside in

Quote:
<tr>
<td width="112" height="34"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_43.png" width="118" height="34" hspace="0" vspace="0" border="0"></td>
<td width="100%" background="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_27.png"></td>
<td width="10" align="right"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_30.png" width="7" height="34"></td>
</tr>
<tr align="left" valign="top">
<td height="15" colspan="3" class="mainWindow"><?php mosLoadModules ( 'right' ); ?></td>
</tr>



And partial of my css sheet

Quote:
/* Body */
BODY {
margin: 0px 0px 0px 0px;
background-color : #FFFFFF ;
color : #465675;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-base-color: #CCE1E3;
scrollbar-darkshadow-color: #356C82;
scrollbar-face-color: #CCE1E3;
scrollbar-highlight-color: #CCE1E3;
scrollbar-shadow-color: #CCE1E3;
scrollbar-track-color: #CACEDB;
scrollbar-arrow-color: #CCE1E3;
padding: 0px;
text-align: center;
}

.headertable {
border-bottom: 1px solid #003366;
}

td.mainWindow {
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
border-left: 1px solid #666666;

}


}
td,tr,p,div {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
}




Any suggestion tips help assistance with this will be greatly apprecated ..

the 'left' loadmodule where the weather is loaded into and the 'right' loadmodule is where the random image is loaded into

Thank you
Bill

Hi,

I have a DIV container and inside there, I have another DIV used to contain images throughout the web site to float left, right - whatever.

I set the background color to this container DIV (figure1) and my image went missing (in IE , Firefox displayed it correctly ). Does anyone have any ideas as to why or how I can fix this? Thanks.
Code:

<div id="figure1">
<h2>Figure 1. The infectious path of rabies virus</h2>
<div class="imgspot" style="margin: 0 20px 0 0;"><img src="images/ani_raccoon_rabies_virus.gif" width="188" height="122" /></div>
<ol>
    <li>Raccoon is bitten by a rabid animal.</li>
    <li>Rabies virus enters the raccoon through infected saliva.</li>
    <li>Rabies virus spreads through the nerves to the spinal cord and brain.</li>
    <li>The virus incubates in raccon's body for apporximately 3-12 weeks.  The raccoon has no signs of illness during this time.</li>
    <li>When it reaches the brain, the virus multiplies rapidly, passes to the salivary glands, and the raccoon begins to show signs of the disease.</li>
    <li>The infected animal usually dies within 7 days of becoming sick.</li>
</ol>
</div>