CSS - Weirdest Problem In Ie6

Hello,

I am having a bit of problem with UL code in my sidebar for my website. In Safari the two items in my list display correctly under the paragraph of text, but in most other browsers the first part of the first item, jumps up and overlays itself in the upper paragraph.

Here is my CSS code:
Code:

ul.sidebar {
  margin: 0 0 5px 0;
  padding: 5px 0 0 25px;
}

ul.sidebar li {
  font-size: 75%;
  list-style-type: circle;
}

ul.sidebar li a {
  color: black;
  list-style-type: circle;
  height: auto !important;
}

And here is its implementation on the website:
Code:

<div id="midcont">
        <!-- left body div starts here-->
        <p>Please use the contact form to the right for inquiries. Most questions are answered within 24-48 business hours. Below is our direct contact information.</p>
        <br/>
        <ul class="sidebar">
        <li><b>E-Mail:</b> xxx@xxx.com</li>
        <li><b>Phone: </b>(xxx) yyy- zzzz</li>
        </ul>
        <!-- left body div ends here-->
      </div>

Thanks in advance for all your help!

Link is he http://setupyourblog [dot] com

Hello,

I am having a problem with displaying multiple tables within a div container.. I get this problem only for IE as firefox and other browsers show the tables how I want.

current code in comments:

// div container, width = 80%
//while loop

// table
<table>
<tr>
<td>
//php table values being printed
</td>
</tr>
</table>

//end while loop
// end div container

the table is aligned to the left and should print out the tables with values as long as they exist in the database. The div container which the table sits in is 80% in width. Within Firefox 5 tables are displayed acorss the container from left to right before moving onto the next line. However in IE it displays all the tables in a long line from left to right and overflowing off to the right ignoring the container parameter.

any hep would be much appreciated

Thanks

I have created this style

.class1 A:link {text-decoration: none;color:white;}
.class1 A:hover {text-decoration: underline; color:Orange;font-weight:bold}
.class1 A:visited {text-decoration: none;color:white;}
.class1 A:active {text-decoration: none;color:white;}

In the aspx page but the problem is that when the user visit some link and try to put the mouse again on that link color is not changing but yea it is making bold font.

What can be the problem or something I am missing ??

http://www.refinethetaste.com/html/

My website displayed fine with internet explorer 7 and Firefox. But so many errors with IE 8. Is it my codes or IE8?

I got the bellow css that I am using to display a drop down menu on my page.
On firefox the drop down menu width looks ok , all the menu options looks the same. But in IE the drop down menu width is showing different. Is displaying the menu options broken as the size of the text.

The bellow lines are a representaion of how the menu in IE is showing. In Firefox all the lines are display the same.

How can I make it look the same in IE as in Firefox?

Drop down menu options
--------------------option 1
--------------------------------option 2
--------option 3
------------------------------------------------option 4

#menuh-container
{
position: absolute;
top: 8.2em;
left: 21.7em;
width:auto;
}

#menuh
{
font-size: 12px;
font-family: arial, helvetica, sans-serif;
width:auto;
float:left;
margin:2em;
margin-top: 0em;
width:auto;
}

#menuh a
{
text-align: left;
display:block;
border: 1px solid #555;
white-space:nowrap;
margin:0;
padding: 0.3em;
width:auto;
}

/* menu at rest */
#menuh a:link, #menuh a:visited, #menuh a:active
{
color: white;
background-color:#3399CC;
text-decoration:none;
}

/* menu on mouse-over */
#menuh a:hover
{
color: white;
background-color: #8FD400;
text-decoration:none;
width:auto;
}

/* attaches down-arrow to all top-parents */
#menuh a.top_parent, #menuh a.top_parent:hover
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

/* attaches side-arrow to all parents */
#menuh a.parent, #menuh a.parent:hover
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:auto;
/* width of all menu boxes */
/* NOTE: For adjustable menu boxes you can comment out the above width rule.
However, you will have to add padding in the "#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}

#menuh li
{
position:relative;
min-height: 0px;
vertical-align: top;
width:auto;
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:46px;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
width:auto;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursorointer;
z-index:100;
}

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

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

/* End CSS Drop Down Menu */

Problem solved, thank you very much

Hello,

I'm struggling to make my homepage work correctly with IE and I'd appreciate some help.

The URL is www . andytrus . com

Firefox looks good, but in IE, the document is for some reason making the size of the page much longer than it should be. As you'll see, there is a lot of wasted space on the bottom I've been trying to get rid of to no avail. No other page is having this problem on my site and its very frustrating!

Here is the code to the index page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see (URL address blocked: See forum rules)" />
<title>Portfolio Website</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--

if (document.images) { // Preloaded images
demo1 = new Image();
demo1.src = "images/bigtext1.jpg";

demo2 = new Image();
demo2.src = "images/bigtext2.jpg";

demo3 = new Image();
demo3.src = "images/bigtext3.jpg";

demo4 = new Image();
demo4.src = "images/bigtext4.jpg";

demo5 = new Image();
demo5.src = "images/bigtext5.jpg";

demo6 = new Image();
demo6.src = "images/bigtext6.jpg";

demo7 = new Image();
demo7.src = "images/bigtext7.jpg";

demo8 = new Image();
demo8.src = "images/bigtext8.jpg";

demo9 = new Image();
demo9.src = "images/bigtext9.jpg";

demo10 = new Image();
demo10.src = "images/bigtext10.jpg";

demo11 = new Image();
demo11.src = "images/bigtext11.jpg";

demo12 = new Image();
demo12.src = "images/bigtext12.jpg";

demo13 = new Image();
demo13.src = "images/bigtext13.jpg";

demo14 = new Image();
demo14.src = "images/bigtext14.jpg";
}

function timeimgs(numb) { // Reusable timer
thetimer = setTimeout("imgturn('" +numb+ "')", 13500);
}

function imgturn(numb) { // Reusable image turner
if (document.images) {

if (numb == "14") { // This will loop the image
document["demo"].src = eval("demo14.src");
timeimgs('1');
}

else { document["demo"].src = eval("demo" + numb + ".src");

timeimgs(numb = ++numb);
}
}
}

// -->
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
 div.c2 {clear:both}
 span.c1 {color: #F0E9B9; font-family: Trebuchet MS; font-size: 1.3em}
/*]]>*/
</style>
</head>
<body onload="timeimgs('2');">
<div id="outside_container">
<div id="container">
<ul id="menu">
<li><a href="resume.html">Resume</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
<ul id="right_menu">
<li><a href="index.html">About Me</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<img src="images/bigtext1.jpg" name="demo" id="panel" alt="demo" />
<div id="content">
<div class="column1">
<h2>Recent work</h2>
<ul class="work">
<li><a href="blowthewhistle.html"><img src="images/work_4.jpg" alt="Sample Work 1" /> <span class="c1">Created a system to help basketball referees make better calls through user-centered design.</span></a></li>
<li><a href="madness.html"><img src="images/work_1.jpg" alt="Sample Work 1" /> <span class="c1">Scripted a unique story and used Google Sketchup to design 3D models for a working video game.</span></a></li>
</ul>
</div>
<div class="column2">
<h2>Background</h2>
<p>Hello, my name is Andy Trus, and I am an interaction designer. I recently graduated from Indiana University with a Masters in HCI, and I also have an undergraduate degree in Marketing from IU in 2004. My combination of skills, creativity, business accumen, and leadership make me an invaluable asset to any design team.</p>
</div>
<div class="c2"></div>
</div>
</div>
</div>
<div id="footer"><img src="images/footerlogo.jpg" alt="AndyTrus.com" /> <span id="footer_text">A portfolio designed to showcase my talents as a designer.</span></div>
</body>
</html>

Here is the code to my CSS which is used in this page

Code:

body {
margin : 0;
padding : 0;
background-color : #11090a;
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}

#outside_container {
background : url(images/bg2.jpg) repeat-x;
}

#container {
background : url(images/bg1.jpg) no-repeat;
min-height : 545px;
max-height : 560px;
width : 1007px;
position : relative;
}

#logo {
position : absolute;
top : 0;
left : 0;
}

#panel {
position : absolute;
top : 115px;
left : 50px;
}

ul#menu {
margin : 0;
padding : 0;
position : absolute;
top : 85px;
left : 67px;
}

ul#right_menu {
margin : 0;
padding : 0;
position : absolute;
top : 85px;
right : 205px;
}

ul#menu li, ul#right_menu li, ul#resume_menu li {
margin : 0;
padding : 0;
list-style : none;
margin-right : 15px;
font-size : 11px;
text-transform : uppercase;
display : inline;
}

ul#menu li a, ul#right_menu li a, ul#resume_menu li a {
text-decoration : none;
color : #bd92b2;
}

ul#menu li a:hover, ul#right_menu li a:hover, ul#resume_menu li a:hover {
text-decoration : none;
color : #ffffff;
}

#content {
padding-top : 270px;
padding-left : 68px;
width : 815px;
color : #f0e9b9;
font-size : 13px;
line-height : 20px;
}

.column1 {
float : left;
width : 280px;
margin-right : 30px;
}

.column2 {
float : left;
width : 390px;
margin-right : 30px;
}

#content h2 {
font-family : Georgia, "Times New Roman", Times, serif;
color : #bd92b2;
margin : 0 0 20px 0;
font-weight : normal;
}

#content h4 {
font-family : Trebuchet MS, "Times New Roman", Times, serif;
color : #f0e9b9;
margin : 0 0 20px 0;
font-weight : normal;
}

ul.work {
margin : 0;
padding : 0;
}

ul.work li {
list-style : none;
margin : 0;
padding : 0;
clear : both;
}

ul.work li a {
color : #e0b882;
display : block;
padding : 5px 10px 5px 10px;
text-decoration : none;
font-size : 10px;
}

ul.work li a img {
float : left;
margin-right : 20px;
margin-bottom : 20px;
}

ul.work li a h4 {
color : #f0e9b9;
margin : 0;
font-weight : normal;
font-size : 13px;
}

ul.work li a:hover, ul.work li a:hover h4 {
color : #ffffff;
}

#footer {
border-top : 1px solid #3f2324;
padding : 5px 50px 45px 50px;
color : #bd92b2;
font-size : 9px;
line-height : 14px;
}

#footer img {
float : left;
margin-right : 10px;
}

#footer span {
display : block;
float : left;
width : 350px;
padding : 15px 50px 10px 40px;
}

#footer a {
color : #9e8292;
text-decoration : none;
}

#footer a:hover {
color : #ffffff;
}

a img {
border : 0;
}

I'd really appreciate the help. Thanks!

Hi,
I resolved the problem I was having before - thank you for the help. Now I have a new problem. If you look at the url www.northshorewebdesign.net/testsite/about, you'll see the sub page navigation on the left. The spacing netween the list items changes when you goe to a sub page - it wasn't doing that before. I have no idea what is causing it. Can anyone determine what would cause this? I checked using firebug and the items are associated with the correct css and this wasn't happening before

Hello all this is my first post so i hope you can help.
The problem is that i don't have a mac to develop on (and in the past that hasn't been a problem) but i'm currently doing a site for a client and they solely use a mac (Firefox / Safari) to view my work.
The site so far looks and functions the way i want it to on windows using IE7 / 8, Firefox 3, Safari and Opera 9.5, The client sent over a scrren shot that showed all the textin the left hand div seemed to be either padded out so it was to tall or either padding has been applied to the divs that contain the text.
Is there a known problem with MACs and CSS rendering?

Thanks in advance... i can't quite afford a Mac to test things on

I've added a border around my exiting web sites main interface page (all the content gets generated via php inside this page). But I'm having two probelms with the <div> structure that are driving me mad. I've moved all the styles inline and I've taken out almost all the php to make the file more readable.

I have two points of confusion. 1) Why is the lower part of the border showing outside the container with the background. 2) How do I get the side parts of the border to fill the entire side. I googled this and have given all the containing div's heights, but every time I give these elemnts height other than the size of the image in the background they shrink to about 20 pixels.

Code:

Thanks for any help. You can see the real web page at www.greystackcellars.com


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><?php print $meta_title ?></title>

<style>
.HeadLine {
	clear:both;
	background-color: #8c8170;
	height: 25px;
	text-align: center;
	vertical-align: middle;
	padding-top: 7px;
	color: #FFFF99;
	font-size: 14px;
}

.Bottom {
	COLOR: #333333;
	font-size: 10px;
	text-align: center;
	clear: both;
	background-color: #8C8170;
	width: 820;
	height: 25px;
	padding-top: 7px;
}
</style>

</head>
<body style="margin:0; padding:0; height:100%;" >

<div ID="Container" style="border: solid #8C8170 2px; margin: 0 auto; width: 962px; z-index: 1; height: 100%; background: url(images/background.jpg); background-repeat: repeat;"> 


<div id="top_decoration" >
  <div style="width:54px; height:51px; float:left; background: url(images/label-border-top-left.gif);"></div>
  <div style="float:left; width:857px; height:51px; background: url(images/label-border-top-mid.gif);" ></div>
  <div style="width:51px; height:51px; float:right; background: url(images/label-border-top-right.gif);" ></div>
</div>

<div id="border_container" style="height:100%; clear:both;">
<div id="left_border" style="height:550px; float:left; width: 20px; background: url(images/label-border-left.gif); background-repeat: repeat;">
  </div>
  <div id="content_container" style="float:left; width:920px;">
<div id="Banner" style="position:relative; height:150px; width: 100%;">
	<div id="YouAreHere" 
		  style="
		   padding-left: 10px;
			float:left;
			width:220px;
			height: 140px;
	 ">
	</div><!-- your are here -->

	<div id="logo" style="float:left;">
	<IMG src="images/logo.jpg" border="0" alt="Grey Stack Cellars"/>
	</div>

	<div align="right" style="float:right; padding-right: 20px; height:150px;">
		<table height ="100%" width="100%">
			<tr><td align="center">
<?php if ($_SERVER['HTTPS'] == 'on')
{
?>
		<img src="images/icon-thawte2.gif" alt="Thawte SSL">
<?php
}
?>
		</table>
	</div>
</div> <!-- banner -->

<div id="headline" style="clear:both; background-color: #8c8170; height: 25px; text-align: center; vertical-align: middle; padding-top: 7px; color: #FFFF99; font-size: 14px; width: 100%;">
<a href="index.php?Page=Home" class="head">Home</a> &nbsp;|&nbsp; 
<a href="index.php?Page=Bennett Valley" class="head">Bennett Valley</a> &nbsp;|&nbsp;
<a href="index.php?Page=WineCategory& Category=Current Release Wines" class="head">Buy Wine</a> &nbsp;|&nbsp;
<a href="index.php?Page=People" class="head">Information</a>  &nbsp;|&nbsp;
<a href="index.php?Page=ContactUs" class="head">Contact</a>  &nbsp;|&nbsp;  
<a href="AccountFunctions.php?Mode=Cart" class="head">View Cart</a>   &nbsp;|&nbsp;
<a href="index.php?Page=Background" class="head">Trade</a>  &nbsp;|&nbsp;

<a href="http://www.greystackcellars.com/HomeGrown/index.php?Page=AccountManager" class="head">My Account</a>
&nbsp;|&nbsp; <a href="AccountFunctions.php?Mode=LogOut" class="head">Log Out</a>

</div><!-- headline -->
<div ID="Wrapper" style="width: 920px; z-index: 1; height: auto; min-height: 400px; vertical-align: top; background: url(images/background.jpg); background-repeat: repeat;"> <!-- This has almost everything -->
<div ID="main" style=" padding: 10px 0px 10px 0px;"> <!-- this has just the padding -->
	<div class="DialogTitle" style=" color:#555555;">
			<?php print $page_title ?>
	</div><!-- page title -->

<?php
	if (!file_exists($page_file))
		print ("Internal error: File ".$page_file." for Page ".$_REQUEST['Page']. " not found<br>");
	else
		require_once($page_file);
	
?>
</div> <!-- main -->
</div> <!-- Wrapper -->


<div class="Bottom">
<a href="index.php?Page=SiteMap" class="bottom-link">Site Map</a> | 
<a href="index.php?Page=Terms" class="bottom-link">Terms & Conditions</a> | 
<a href="index.php?Page=Privacy" class="bottom-link">Privacy Policy</a> |
<a href="index.php?Page=Gallery" class="bottom-link">Photo Gallery</a>
</div> <!-- Bottom -->
</div> <!-- content_container -->
	<div id="right_border"  style="float:right; width: 20px;">
  <img src="images/label-border-right.gif" width="20" height="555">
  </div>
</div> <!-- left and right border_container -->
<div id="bottom_decoration" style="clear:both">
  <div style="width:56px; height:56px; float:left; background: url(images/label-border-bot-left.gif);"></div>
  <div style="float:left; width:848px; height:51px; background: url(images/label-border-bot-mid.gif);" ></div>
  <div style="width:56px; height:56px; float:right; background: url(images/label-border-bot-right.gif);" ></div>
  </div><!--bottom decoration-->
</div> <!--Container-->
</body>
</html>

Peter

I am going nuts trying to figure out what's causing my problem...

<edit>Links Removed by User</edit>

I don't even know how to explain it, other than it works fine in FF.

Basically, when the text-area cols are set too large (>40), then the right cells all collapse to the left instead of obeying the specified width of the left cells... It has nothing to do with the colspan, I tried removing it and just having the textarea in the right cell, but it still causes the "squishing" Anyone have an idea?

Thanks in advance.

Hi to all

Can anyone help me how to identify browser in css and apply css according to the browser

for example

// if Browser is IE 7

.test
{
font-size:10px
}

// if Browser is IE 8
.test
{
font-size:12px
}


Is this is possible .

i found this code but it does not work for iE 7 or IE 8
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6hacks.css" />
<![endif]-->

thanks

Hi, I already searched for this but didn't find anything So I registered and opened a new thread.

First, this is my webpage: http://windmolentechnologie.tk

In FF it shows up all perfect, but when looking in IE theres a line between the nav and the image (actually through the image)

How can I fix this?

Code:
css

html {
   margin:0;
   padding:0;
   height: 100%;
}

body { 
   background-color: #f2f3ed; 
   margin: 0px; 
   padding: 0px; 
   height: 100%;  
   z-index:0; 
   position:relative;
   text-align: center;
}

#container {
   position:relative;
   height:auto !important;
   min-height:100%;
   width: 760px;
   margin:0 auto;
}

#nav {
   width:100%;
   height:160px;
   background: url(../images/Nav.png) no-repeat;
}

#banner {
   width:100%;
   height:101px;
   background: url(../images/Banner.png) no-repeat;
}

#content {
   width:100%;
   height:500px;
   background:transparent;
}

#new {
   background: #e6e8dc url(../images/New.png) no-repeat;
   width:220px;
   height:500px;
   float:left;
}

#inhoud {
   background: #e6e8dc url(../images/Inhoud.png) no-repeat;
   width:540px;
   height:500px;
   float:left;
   text-align: left;
}

#footer {
   background: url(../images/Footer.png) no-repeat;
   height:50px;
   width:100%;
   position:relative;
}

p {
margin:35px 5px 10px;
}

Code:
index.html

<HTML>
<HEAD>
<TITLE>Windmolentechnologie</TITLE>
<LINK HREF="css/default.css" REL="stylesheet" TYPE="text/css" />
<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="js/nav1.js"></script>
<script src="http://static.freewebs.getclicky.com/44044479.js" type="text/javascript"></script><noscript><img alt="Clicky" src="http://in.freewebs.getclicky.com/44044479-fwdb4.gif" /></noscript> 
</HEAD>
<BODY>

	<div id="container">

	<div id="nav">
<img src="images/Nav2.png" USEMAP="#nav" border="0" name="nav1">
<map name="nav">
  <area shape="rect" coords="261,40,339,120" href="index.html" alt="Home" target="_top" onMouseOver="imageChange('nav1','alt1')" onMouseOut="imageChange('nav1','alt0')" />
  <area shape="rect" coords="341,40,419,120" href="inhoud.html" alt="Home" target="_top" onMouseOver="imageChange('nav1','alt2')" onMouseOut="imageChange('nav1','alt0')" />
  <area shape="rect" coords="421,40,499,120" href="logboek.html" alt="Home" target="_top" onMouseOver="imageChange('nav1','alt3')" onMouseOut="imageChange('nav1','alt0')" />
  <area shape="rect" coords="501,40,579,120" href="profielen.html" alt="Home" target="_top" onMouseOver="imageChange('nav1','alt4')" onMouseOut="imageChange('nav1','alt0')" />
  <area shape="rect" coords="581,40,659,120" href="bedrijven.html" alt="Home" target="_top" onMouseOver="imageChange('nav1','alt5')" onMouseOut="imageChange('nav1','alt0')" />
</map>

	</div>

	<div id="banner">

	</div>

	<div id="content">

		<div id="new">
Dit is een testlijntje
		</div>

		<div id="inhoud">
<p>Dit is een testlijntje</p>
		</div>

	</div>

	<div id="footer">

	</div>

	</div>

</BODY>
</HTML>

KFredje

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>

I have two problems,

1. One page of my website centers nicely in everything but but IE, trying to fix. Can't figure out what to do.

2. I attempted to use Firebug to see if I could figure out why this one page does not center vs all the others but it escapes me. Then I realized I was using Firebug in Firefox, how would it know there was a problem in IE.

I am a new member of this forum so I can't post a URL for you to look at.