CSS - Problem With Listing

I have a really annoying issue with IE6. I've gotten the page to work properly for any other browser (FF, Safari, IE7, Opera), but IE6 screws the way the page looks.

Can someone please give me some ideas as to how to change the CSS or HTML so that I fix this problem but at the same time don't cause problems with other browsers?

sbcclending.com/test/

Thanks
RG

I've got this little navigation menu, everything works in Opera and Firefox, but in IE the border overlaps the whole thing.. See at http://www.leetwebmasters.com/2.0

CSS:
Code:

#menu3 {
   width: 200px;
   border:1px solid #BCD2E6;
   border-style: solid solid none solid;
   }
   
#menu3 li a {
     height: 24px;
   text-decoration: none;
   }   
   
#menu3 li a:link, #menu3 li a:visited {
   color: #8BADCF;
   display: block;
   background:  url(menu3.gif);
   padding: 8px 0 0 10px;
   }
   
#menu3 li a:hover {
   color: #627EB7;
   background:  url(menu3.gif) 0 -32px;
   padding: 8px 0 0 10px;
   }
   
         #menu3 li {
   list-style:none;
   }

   
   #menu3 ul {
   padding-top:0px;
   margin-top:0px;
   padding-left:0px;
   margin-left:0px;
   }

Hi, I am a newbie to css and have attempted to convert various webpages to css over the past few months. Although I am new to css I have been working on computers (programmer and user) for the last 13 years.

My main observation is that css is being limited by the inability or lack of interest on the part of browser developers to ensure that all pages are rendered the same in all browsers. It is very frustrating to work hard on a complicated layout only to open the page from another browser and have all your hard work look as if it has been through the spin cycle.

Of course such criticisms apply in other circles, for example different compilers handling c/c++ code is slightly different ways. For a programmer working on code to run him/herself this is not so serious since you get the code to work on the machine you want it to run on, with webpages we don't have that luxury.

Any thoughts?

R Haynes

In IE6 my page is not lining up like it is supposed to. The left navigation is not sitting flush against the footer or main content DIV. I have tried a clearing DIV after the main content, but still can't get it to stay flush against the footer. It looks fine in IE7, FireFox, and Safari. Can anyone help me with this?? I would appreciate it!

Here is my CSS code
Code:

body {
	background-image: url(../images/bgs/bg_try_02.jpg);
	background-repeat: repeat;
	margin-top: 0px;
	margin-bottom: 0px;
}


.container {
	background: transparent;
	width: 1000px;
	padding-top: 0px;
	margin: 0px auto;
}
.banner {
	background: url(../images/banner.jpg);
	height: 245px;
	width: 1000px;
	margin: 2px auto 4px;
	padding-bottom: 0px;
	padding-top: 0px;
}
.left_col {
	background: url(../images/bgs/left_col_bg_03.jpg) repeat-y;
	float: left;
	height: 623px;
	width: 200px;
	margin: 1px auto 0px;
	padding: 1px 0px 0px;
}
.pipe {
	background: url(../images/bgs/images/pipe_bg_03.jpg) repeat-y center;
	text-align: center;
	height: 622px;
	width: 200px;
	margin: 0px auto;
	padding-bottom: 2px;
}

.right_col {
	background: #FFFFFF;
	float: right;
	width: 786px;
	height: 620px;
	padding: 1px 9px 2px 5px;
	margin: 1px 0px 0px;
}
.footer {
	background: url(../images/bgs/footer_02.jpg) repeat-x;
	padding-bottom: 15px;
	margin: 0px auto;
	padding-top: 5px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000000;
	height: 75px;
	clear: both;
}
.border_2 {
	background: url(../images/bgs/border2.gif) repeat-x;
	height: 14px;
}
.clearfix {
	clear: both;
	visibility: hidden;
	font-size: 1px;
	line-height: 0px;
	height: 0px;
}

.border_1 {
	background: url(../images/bgs/border1.gif) repeat-x;
	height: 14px;
}
.bg_color {
	background: url(../images/bg_color_02.jpg) repeat-x;
	height: 768px;
}
.bus_border {
	background: url(../images/bgs/border2.gif) repeat-x;
	height: 14px;
	width: 140px;
}
.floatright {
	float: right;
	margin: 4px;
	clear: right;
}
.btn1 {
	background: url(../images/btns/left_bg_nav.jpg);
	height: 65px;
	width: 200px;
}
.btn2 {
	background: url(../images/btns/left_bg_nav.jpg);
	height: 65px;
	width: 200px;
}
.btn3 {
	background: url(../images/btns/left_bg_nav.jpg);
	height: 65px;
	width: 200px;
}

I'm trying to replace all the tables in my site for divs

This is a test page for the main div container. Inside this will be the 3 columns of the layout: http://www.djbrunofacca.com.br/index2.php

It renders ok in firefox but in ie 6.0 half of the box gets off the screen to the left. I've been trying to correct this for 8 hours straight and nothing.

heres the css for the whole 3 columns thing:

Code:

.box {
border:3px solid black;
position: absolute;
left; 0px;
width: 720px;
height: 100%;
}

.leftcol {
position: absolute;
padding-left: 15px;
padding-right: 15px;
top: 0px;
width: 140px;
height: 100%;
background-color: #333;
}

.maincol {
position: absolute;
padding-left: 15px;
padding-right: 15px;
top: 0px;
left: 110px;
width: 440px;
background-color: #0066cc;
}


.rightcol {
position: absolute;
padding-left: 5px;
padding-right: 5px;
top: 0px;
right: 0px;
width: 140px;
height: 100%;
background-color: #333;
}

thanks
bruno

Hi there,

Does anyone know what this code messed up in IE6, its fine in IE7 and firefox? I'v attached the html, css and a screengrab.

Thank

Code:

<div class="commentAvatar"><img src="/images/avatars/noavatar.gif" alt="USER" border="0" height="50" width="50"></div>
<div class="commentMessage">
<div style="float: right; width: 32px; text-align: center;"><div class="voteBad" id="3:-:15"></div><div class="voteGood" id="3:+:15"></div></div>
<em class="comment-info"><span>4 votes</span>
	<strong>guest23</strong> said <strong>(3 days, 10 hours ago)</strong></em>

    my message<br>
is here</div>

Code:

/* CSS*/
.commentAvatar {
	width:70px;
	height:64px;
	float:left;
	margin-left:114px;
	background-image:url(images/comment_left.gif);
	background-position:right;
	background-repeat:no-repeat;
}
.commentMessage {
	width:391px;
	min-height:50px;
	margin-left:184px;
	padding: 5px 10px;
	background-color:#555555;
	background-image:url(images/comment_bg.jpg);
	background-repeat:no-repeat;
}

Hello everyone,

for our intranet I have developed new application tools with tabs to change icons. it is working fine on IE7+ but having problem with IE6.

there are two divs in this applications and on IE 7+ both divs starts in new line. for some reasons in IE6 it comes in one line. what cna I put in the second div that will make it appear on new line. I have tried putting <p> tag but doesn't make any different.

Any suggestions.

thank you.

<div id="mytabsmenu" class="tabsmenuclass">
<span style="cursorointer">
<ul>
<li><a rel="gotsubmenu[selected]">Trust Applications</a></li>
<li><a rel="gotsubmenu">General Applications</a></li>
</ul>
</span>
</div>


<div id="mysubmenuarea" title="Applications Toolbar" align="center" style=" background-image:url(/templates/default/IconImages/iconBkgrd.jpg); background-position:top; background-repeat:no-repeat; margin:2px; padding-top:12px; padding-left:30px; vertical-align:bottom; height:50px;">

<!--1st link within submenu container should point to the external submenu contents file-->
<a href="/templates/default/js/submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>
</div>

Need to know how the pull down menu and a browse button could take a style like


http://www.discovertravel.no/


i tried to make it but it did not work on firefox... so can anyone help me to make this style coz it appears well in firefox.

So I have tested in all versions of IE and IE 7 seems to be the only one that gives me a problem.
I have tried so many hacks. And now I am at a loss of ideas,time and mind.
the site is
woodbuiltright
com
/
index-alpha1
php

It seems the "E-Page" Div does not expand to contain everything.

I have tried clearing divs but I must be missing something.
Thanks

Hi, I am having an issue using my CSS code, I have a drop down section on my menu bar on my site.

I'm trying to firstly just set the background of the whole bar,

Code:

#nav-m {
  font: normal 12px Verdana;
  font-weight: bold;
  width: 100%;
}
  
	#nav-m ul {
	  float: left;
	  left: 0;
	  padding: 2px 0;
	  text-decoration: none;
	  text-indent: 5px;
	}
  
	  #nav-m a {
		  display: block;
		  width: 10em;
		  w\idth: 6em;
		  color: #012345;
		  text-decoration: none;
		  padding: 0.25em 2em;
	  }
  
	  #nav-m a.daddy {
	  }

	  #nav-m li {
		  float: left;
		  padding: 0;
		  background-image: url(http://taxbusters.eu.com/images/nav-bar1.jpg);
		  background-repeat: no-repeat;
	  }

	  #nav-m li ul {
		  position: absolute;
		  left: -999em;
		  height: auto;
		  width: 14.4em;
		  w\idth: 13.9em;
		  font-weight: normal;
		  border-width: 0.25em;
		  margin: 0;
	  }
  
	  #nav-m li li {
		  padding-right: 1em;
		  width: 13em
	  }

	  #nav-m li ul a {
		  width: 13em;
		  w\idth: 9em;
	  }

	  #nav-m li ul ul {
		  margin: -1.75em 0 0 14em;
	  }
	  
	  #nav-m li:hover ul ul, #nav-m li:hover ul ul ul, #nav-m li.sfhover ul ul, #nav-m li.sfhover ul ul ul {
	  left: -999em;
	  }
	  
	  #nav-m li:hover ul, #nav-m li li:hover ul, #nav-m li li li:hover ul, #nav-m li.sfhover ul, #nav-m li li.sfhover ul, #nav-m li li li.sfhover ul {
	  left: auto;
	  }

	  #nav-m li:hover, #nav-m li.sfhover {
	  background: #bdd7e6;
	  }

however the background doesnt show up, and the font alignment isnt right, - there are so many problems

http://alturl.com/nfkp

I've spent a good amount of time searching this site for an answer. Although I found some good information, I am still hitting this brick wall.

My DIV tag works in IE but not FF. Below are three links. The top two are to my site and the one below is to another site doing the same thing I'm doing but working fine in both browsers. I can't explain it any better.

http:www.humito.com/contact.html (set up for IE)
http:www.humito.com/contact2.html (set up for FF)
http://plazamexico.com/menu/abouttheplaza.html (just like first link)

can someone share some insight.

I'm not too sure what the problem is here but you will notice that my <div> that has the page title in doesn't align to the top of the wrapper <div>. How do I do this?

To see what I mean, go he

allwhatsrock.com/articles/new.php

I am sorry, I can't show the page as an example as it is a clients website.

Basically the problem is the box model (I think).

In IE the background file loads fine, but in FF it doesn't.

It is a box inside a box, inside a box.

I have tried

body #divname

html # divname

html > divname

and all other selector variants I can think of to no avail.

I was wondering if this is a known problem. I thought it might be z-indexing but div's inside the affected div are picking up their background images.

I am currently trying to build a website for a church, and have run into a little css coding problem:

It seems as if the browser is not interpreting how I see the CSS code to lay out on the page (common mistake I'm sure). I know a lot of the problems I am having comes from the height of my id's. If you take a look at "sci.tamucc.edu/~ksnapka/Website/Home/index.php" , the blue-bordered box is my "bodyWrap" css id. I am wanting this to expand to 100% of its contents inside the div container. If you look under some of the pages under "Our Faith in Action", I believe these work fine because I am using text inside of the bodyWrap container instead of other div containers nested in bodyWrap. The display on the home page actually looks better on IE, so I'm also not sure why firefox sets the height of that contained to 0 (I assume for some reason it sees that the container is empty since it just has other divs located inside of it?)

The CSS code is on "sci.tamucc.edu/~ksnapka/Website/CSS/csTemplates.css"


Any help is greatly appreciated Thank you in advance.