CSS - Padding On Li Doesnt Show Up In Ie

i know ie sux but,
i nearly fixed the columns height problem but there is still a problem ,,
site : http://www.bekirhoca.com/index2.asp
>> it looks nearly fine (instead of the image over the menu) when i add some content to the columns, height expands normally .
But in firefox it doesn't seem normal because of the -- #wrapper {float:left} -- tag. When i remove it firefox acts normally but ie dont , when i add it reverse. So is there an hack to make firefox not to see that float? or i dont know where i did the mistake !!???!!

and there is another problem ,, at 1280x1024 screen resolution the inner content expands, i want to fit it inside where it is between the right and the left cols.

and and and why the right column isnt fit in ff as in ie?? you can check the site's top image 's right corner and see what i mean > http://www.bekirhoca.com/index2.asp ,, its a little bit longer than as seen in ie

Hi.

The main gallery image is pushed down from the top of the logo on the page below:

http://zombiemod.com/rm/nina2/main.php?g2_itemId=14

I want to move this block on the right up. I believe this uses the main-image-container div as shown below, but when I put a negative top margin on this div it doesnt move.

The is the CSS I tried for the main-image-container div:
Code:

margin-top: -70px;

This is the HTML:
Code:

<div id="content">
  <div id="main-image-container"  {if $theme.imageCount == 0}style="display:none"{/if}>
    {if $theme.imageCount > 0}
      <div id="slideshow-controlsx">
        <ul id="control-buttonsx">
    <li><button id="controls-left"><img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" /></button></li>
    <li><button id="controls-play"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" /></button></li>
    <li><button id="controls-right"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" /></button></li>
        </ul>
      </div>

Why didnt my negative top margin work?

<ul> doesnt work in IE properly?
I have problem with IE7 and <

code:

html:

<ul>
<li><a href="A.html">A</a></li>
<li><a href="B.html">B</a></li>
<li><a href="C.html">C</a></li>
</ul>

If I open site with IE7 pages B.html and C.html works fine, whereas A.html loose its css for navigation (ul a:link etc..)

any ideas?

code for css:

#containerNavigation {
margin: 0;
float: left;
width: 100%;
background: #990000;
}


#navigationHorizontal {
zoom: 1;
width: 750px;
margin: auto;
padding-right: 0;
height: 35px;


}

#navigationHorizontal ul {
float: right;
padding: 0;
margin: 0;
list-style: none;
width: 749px;




}

#navigationHorizontal li {
padding-right: 0;
margin: 0;
display: inline;

}

#navigationHorizontal li a {
float: left;
color: white;
text-decoration: none;
text-align: center;
background-color: #990000;
line-height: 35px;
margin: 0 0 0 0;
padding: 0 25px 0 28px;
font-size: 1.2em;

}



#navigationHorizontal li a:hover {
color: #FFF;
text-decoration: underline;
}

Hey, I have created a site but here is the 1 problem. My CSS doesnt work in firefox. But the site looks perfect in ie; does anyone know why this could happen. Thanks. I use font-family: etc...... color and bgcolor. Thanks.

Hey gang,

My suckerfish menu wonk work properly in ie5.5 and ie6 but works fine in all the others... the problem is that if i hover over main link that drop down menu will appear but then wont stay there when i hover the mouse over the submenu.

i removed all the content from below the menu and suddenly it works, but my site needs content!

Has anyone had this problem before???

#navi
{
width: auto;
background: url(images/navi01.jpg) repeat-x top left;
}

#navi, #navi ul
{ /* all lists */
padding: 0px 0px 0px 26px;
margin: 0;
list-style: none;
height: 29px;
}

#navi a
{
font-weight: bold;
margin: 8px 0px 0px 0px;
color: #ffffff;
display: block;
width: auto;
padding: 0px;
text-decoration: none;
}

#navi li
{
float: left;

width: auto;
padding: 0px 26px 0px 26px;
}

#navi li ul
{
position: absolute;
width: 160px;
left: -999em;
padding: 7px 0px 0px 0px;
margin: 0px 0px 0px -17px;
}

#navi li ul li
{
width: 160px;
height: auto;
padding: 0px 0px 0px 0px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cfcfcf;
border-left: 1px solid #ffffff;
border-right: 1px solid #cfcfcf;
overflow: visible;
}

#navi li ul a
{
background-color: #f2f2f2;
color: #1989d1;
padding: 3px 16px 4px 16px;
margin: 0px;
}

#navi li.heading
{
border-top: 1px solid #7fa7bf;
border-bottom: 1px solid #67889b;
border-left: 1px solid #7fa7bf;
border-right: 1px solid #67889b;
}

#navi a.heading
{
background-color: #799eb5;
color: #ffffff;
padding: 3px 16px 4px 16px;
}

#navi li:hover ul, #navi li.sfhover ul
{ /* lists nested under hovered list items */
left: auto;
}




<script type="text/javascript">

<!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("navi").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>

</script>
</head>
<body>
<div id="border">
<div id="container">
<div id="content_left">
<div id="header"><div id="header01"></div></div>
<ul id="navi">
<li>
<div><a href="">About Us</a></div>
<ul>
<li><a href="">History</a></li>
<li><a href="">Staff</a></li>
<li><a href="">Employment</a></li>
</ul>
</li>
<li>
<div><a href="">Products and Services</a></div>
<ul>
<li class="heading"><a href="" class="heading">Support Services</a></li>
<li><a href="">Customer Support</a></li>
<li><a href="">Advanced Support</a></li>
<li class="heading"><a href="" class="heading">Professional Services</a></li>
<li><a href="">Engineering Services</a></li>
<li><a href="">Project Managemant</a></li>
<li><a href="">Software Development</a></li>
<li><a href="">Consulting</a></li>
<li class="heading"><a href="" class="heading">Solutions</a></li>
<li><a href="">Voice over IP (VOIP)</a></li>
<li><a href="">Information Lifecycle Management (ILM)</a></li>
<li class="heading"><a href="" class="heading">Procurement Services</a></li>
</ul>
</li>
<li><div><a href="">Contact Us</a></div></li>
<li><div><a href="">Links</a></div></li>
<li><div><a href="">News</a></div></li>
</ul>

is text align restricted to div tags only? and/or block level elements?

and if so, how could i get the program names (ICQ, MSN, Yahoo!) to text-align:left..... and the contact info to align right.... do i HAVE to use a float for this?

http://defunctgames.com/contactinfo.htm

Hello,
I got a website with a table on it. This is how it looks in firefox 2.0:
http://img139.imageshack.us/img139/9822/helpffkr6.jpg
And here's how it looks in IE6:
http://img111.imageshack.us/img111/9675/helpiehi7.jpg
As you can see, where FF do display the table border, IE does not.

Here's the simplified table code and the related css code:
Table ->
Code:

<table class="listings" style="width: 100%;">
<tr>
   <td colspan="2" class="darkRow">Category 1</td>
</tr>
<tr>
   <td style="width: 30%" class="lightRow">Thread 1</td>
   <td style="width: 70%" class="lightRow">This is thread number 1.</td>
</tr>
<tr>
   <td style="width: 30%" class="lightRow">Thread 2</td>
   <td style="width: 70%" class="lightRow">This is thread number 2.</td>
</tr>
</table>

CSS code -> Code:

<style type="text/css">
table.listings{
	border-collapse: collapse;
	border-style: none;
}
table.listings tr{
	border-style: solid;
	border-color: #4D3D4D;
	border-width: 1px;
	vertical-align: top;
}
.darkRow{
	background-color: #4D3D4D;
	border-color: #4D3D4D;
	color: white;
	padding-left: 4px
}
.lightRow{
	background-color: #BFACBF;
	border-color: #4D3D4D;
	color: #4D3D4D;
	padding-left: 4px;
}
</style>

It seems as if IE doesnt support borders around a whole row, because when i add this:
Code:

table.listings td{
	border-style: solid;
	border-color: #4D3D4D;
	border-width: 1px;
	vertical-align: top;
}

With that also IE displays a border but not only around the whole row, but around all the cells individually, which is not my intention.

Does anybody have an idea what i can do about this?

thanks in advance.

Hi all, thanks on the last post, hope you can help with this too.

I'm trying to get an image to display in a box, and repeat all along the box (only a 1 pixel image). But for some reason its not being picked up.

my code is:

Code:

<body>
    <div id="wrap">
        <div id="innerwrap">
             <div id="holding">
             holding
             </div>
        </div>
    </div>
</body>

and the css is this:

Code:

#wrap{width:60em;height:43em;background:silver;margin:0 auto;text-align:left; padding-top:.1em;}
#innerwrap{ background-color:gray;margin:.5em;height:42em;}
#holding {background:#3F8BCA url(/img/topgradient.jpg) repeat-x scroll left top;}

I've tried to change the brackets to forward brackets, tried to and ", but nothing works, im sure the spelling etc is correct...

any help would be great

Kind regards
MG

Page looks fine on my screen but when i resize window-divs overlap or in some cases just text runs on top of other divs messed up.

Do I need to set all my width-height values and margins to auto?
Margins in my wrap are auto.
What are common causes of this?

heres my css-its kinda a potpourri
Code:

#wrap {width:70%;
      min-width:700px;
	  margin-left: auto;    
      margin-right: auto;
	 
	
	  
	  
}


#headertop {background:url(gradient.png);
            height:40px;
			}
#header {background:url(black.png);
        height:70px;
}
.title {float:left;
       margin:5px;
}
#menu {float:right;
      margin-top:30px;
	  margin-right:20px;}
	  
.link {float:left;
	  margin-top:8px;
	  margin-left:5px;
	  background:url(gradient.png);
	  border-right:1px solid black;
	  height:auto;
	  width:auto;
	  padding:5px;
	  text-align:center;
	  
	  font-family:Lucida Grande;
	  padding-right:3px;
	  margin-bottom:0px;
	  border-top:1px solid grey;

}
#floatright {float:right;
            width:400px;
			margin:0px;
			padding-left:10px;
			border-left:2px double grey;
			height:350px;
			background:#000000;
			
			}

.nav {float:left;
     
	 height:400px;
	 padding-right:10px;
	 padding-top:50px;
	
	 }
.txt {padding-left:10px;}
#bottom{background:#000000;
      height:10px;
      margin-top:0px;
	  border:2px solid black;}
#content {
         border:1px solid grey;
         
		 background:#fffbe9;
		 
		 }
.floatl{float:left;}
#testarea {
          
		  padding-top:25px;
		  padding:10px;
		  min-height:330px;
		  
		  background:#ffffff;
		  border-left:1px solid grey;
		  }
#testareaalt {
          width:auto;
		  padding-top:25px;
		  padding:10px;
		  min-height:330px;
		  height:auto;
		  background:#000000;
		  border-left:1px solid grey;
		  }
.area {background:url(background.png);
      height:30px;
	  }

.button {width:100px;
        height:25px;
        border:1px solid black;
		background:grey;
		padding:8px;
		display:block;
		
		}
		
		
          
	  
.top {background:000000;
     height:15px;
	 }
h3 {font-family:Sans-serif;
   background:url(gradient.png);
   padding:5px;
   }

h4 {font-family:Sans-serif;
   background:url(black.png);
   padding:5px;
   margin:0px;
   color:#ffffff;
   }
h4.g {font-family:Sans-serif;
   background:url(black.png);
   padding:5px;
   margin:0px;
   color:#00af33;
   }
  
p {font-family:verdana;
  line-height:15px;
  font-size:13px;
  padding-left:10px;
  padding-right:10px;
  color:7d7d7d;}
 
ul {font-family:verdana;
  line-height:15px;
  font-size:13px;
  padding-left:40px;
  padding-right:10px;
  color:7d7d7d;}
  
table {border-collapse:collapse;
     padding:5px;
	 font-family:verdana;
    line-height:15px;
    font-size:13px;
    padding-left:10px;
    padding-right:10px;
    color:7d7d7d;
	 }
table.social {border-collapse:collapse;
     padding:10px;
	 margin:5px;
	 background:url(gradient.png);
	 }
	 
	 }
td.alt {background:grey;
       }
#textbox {
         border:1px solid grey;
		 background:url(black.png);}
#menutrial {float:right;
            margin-right:0px;}
.left {float:left;
      margin:10px;
	  clear:left;}
.container{margin:8px;}
a:link, a:visited {
	color: #cc0033;
	padding:5px;
	text-decoration: none;
	font-family:Sans-serif;
}
a:hover, a:active {
	/*background-color: #C74350;*/
	color: #ffffff;
	text-decoration: none;
	text-shadow: 1px 1px 1px #33ff00;
	font-family:Sans-serif;
}

#textboxa{
         border:1px solid grey;
		 background:#000000;}
img.alt {margin-left:90px;
        margin-right:auto;
		width:70%;
		border:0px;
		}
#right{float:right;}

i want to make a word Stretch across a givin width... when ever i set it to expanded, wider, or any of the others... nothing happens to the text.. does anyonw know how this works?

I have created a dropdown menu for my site.
The dropdown works great in Firefox, safari and opera but it does not drop down in IE.

The menu is displaying ok in IE but when you hover over a tab nothing happens.

This is the link http://www.misi.co.uk/2_template.php There are two menus "navigation" which is the bottom category menu in grey and "navigation_blue" - which is the top bue tabs. I have the same problem with both menus.

I normally hash around to get IE to function as I wish however only having a mac infront of me its a bit of a pain as I have to ring a friend to check IE for me, if anyone knows of a browser test that allows you to check functions in IE please let me know, I use a couple but only get screen shots so its fine for layout checks but no good at testing drop down menus and the like.

Code:

/* Categories Bottom MENU */
 
#navigation {width:985px;height:50px;margin-top:-27px;}
#navigation ul {margin-left: -40px; text-align:center;}
#navigation li {height:21px;float: left; text-align:center;position: relative;background: url(/images/top-tab-lgt.png) no-repeat}
#navigation * {cursor: pointer;}
#navigation li a {text-align:center;width:87px;float:left; color:#333333; font-size:5px; display: block; padding-left:2px;padding-top:2px; text-decoration: none; }
#navigation li a span {float: left; display: block; line-height: 21px; height: 21px; padding: 0 6px 0 1px;}
 
.os_windows #navigation li a span {padding: 0 0px 0 0px}
 
#navigation li a {color: #000000; font-size: 11px; font-weight: 100; font-family: Arial, sans-serif; }
#navigation li a:hover {color: white; background-color: #e2e0e1;}
#navigation li {list-style:none;}
#navigation li:hover .navigation_hover,
#navigation li.hover .navigation_hover {visibility: visible;}
 
#navigation .navigation_hover {
  width: auto;
  position: absolute;
  top: 18px;
  left: -40px;
  margin: 0px;
  display: block;
  visibility: hidden;
  border-top: 0;
  z-index: 4;
}
 
#navigation .navigation_hover li {float: left}
 
#navigation .navigation_hover li a {
  float: none;
  padding: 0 2px;
  line-height: 21px;
  width: 110px;
  background: #e2e0e1;
  color: #000000;
  border: 0;
}
 
#navigation .navigation_hover li a:hover {
  background: #cc205c;
  color: white;
}
 
/* TOP TABS */
#blue_navigation {height:50px; text-align:right; margin-left: 265px; margin-top:-5px;}
 
#blue_navigation ul {text-align:right;  }
#blue_navigation li {height:40px; float: left; position: relative;list-style:none;background: url(/images/top-tab-blue.png) no-repeat;}
#blue_navigation * {cursor: pointer;}
#blue_navigation li a {width:135px; float: left; color:#333333; font-size:10px; display: block; text-align:center;padding-top:5px; text-decoration: none; }
#blue_navigation li a span{width:135px; float: left; color:#333333; font-size:10px; display: block; text-align:center;padding-top:5px; text-decoration: none; }
 
#blue_navigation li {list-style:none;}
 
 
#blue_navigation li a:hover {color: #0D7DC7; background: url(/images/top-tab-hblue.png) no-repeat}
#blue_navigation li:hover .blue_navigation_hover,
#blue_navigation li.hover .blue_navigation_hover {visibility: visible;}
 
.os_windows #blue_navigation li a span {padding: 0 0px 0 0px}
 
#blue_navigation .blue_navigation_hover {
  float: none;
  position: absolute;
text-align:left;
  width: auto;
  left: -40px;
  height:21px;
  margin-top: 20px;
  display: block;
  visibility: hidden;
   z-index: 4;
}
 
#blue_navigation .blue_navigation_hover li {float: left}
 
#blue_navigation .blue_navigation_hover li a {
  float: none;
    left: -85px;
  padding-top: 0px;
  line-height: 20px;
  color: #7c7c7c;
  border: 0;
}

An important part of my design is the background image. I have tried many different things but cannot seem to solve this. I have two options:

Option 1:
One placing the image in a tag within the body. Results where pretty good except in IE 6 the content is displayed under the image.

You can see the effect of option 1 on this portion of the site: http://woodysfireworks.nl/w/index.html
example

Code:

/*option1 background image*/
img.bg {
background-color:#000;
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;
overflow:hidden;

/* Set up positioning */
position: fixed;
z-index:0;
top: 0;
left: 0;

}

@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}

Option2:
I placed the image in the style sheet and then included a class and id in the tag. Here the images get blown up in all version of IE.

example
Code:

/*option 2 background image*/
#start{ background:url(images2/426.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";}

I would really appreciate some insight. I am pulling my hair out.

Thanks

Firefox works, IE doesn't Help with CSS pls :-)


Firefox: http://img144.imageshack.us/img144/...irefoxstone.jpg

Internet Explorer: http://img5.imageshack.us/img5/3856/explorerstone.jpg

Here is that part of css i believe is affecting it:

Code:

div.module h3 {
margin: 0px 0px 15px 10px;
font-size: 1em;
color: #FFEFD5;
text-transform: uppercase;
}

div.module {
margin-bottom: 25px;
padding: 5;
float: left;
clear: both;
width: 100%;
background: url(../images/bottom.jpg) repeat-x bottom left;
}

div.module div {
padding: 0px;
background: url(../images/left.jpg) repeat-y top left;
}

div.module div div {
padding: 0px;
background: url(../images/top.jpg) repeat-x top left;
}

div.module div div div {
padding: 9px 9px 20px 9px;
background: url(../images/right.jpg) repeat-y top right;
}

div.module div div div div {
margin: 1;
padding: 3;
background: url(../images/parchtexture.jpg);
}

==================

I have seen this code in some index files

Some people put this in there index is this a code does this make your index.php use a different css file depending on the browser you use?

Code:

<!--[if lte IE 6]>
<style type="text/css">
.clearfix { height: 1%;}
#ja-cssmenu li { float: left; clear: both; width: 100%; }
</style>
<![endif]-->

<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix { display: inline-block;}
</style>
<![endif]-->

ok so I have a menu done via CSS and initially I set up a left border on it so it shows up like this:

| menu 1 | menu 2 | menu 3

Now with the help of JQuery I am trying to get rid of the | on the menu 1..

Jquery is applying the class to the correct a selector but the border is not being removed? if I change the css to "border: 1px solid black" it applies the border to the whole of menu 1 but the left border still stays WHITE? the css class is:

.removeBorder {
border:0;
}

the menu CSS is:
Code:

ul.navigation-1 li a,
ul.navigation-1 li a:link,
ul.navigation-1 li a:visited
	{ padding:4px 10px; display:block;text-decoration:none; border-left:1px solid #ffffff;color:#ffffff; width:100%; height:13px; }

If i remove the border-left attribute from here, the border goes away.. and via Jquery I am targetting the A.. so what is the problem?

Just a FYI: html code:
Code:

<div id="left-menu">
	<ul class="navigation-1">
	   <li><a class="removeBorder" href="">Products</a><ul class="navigation-2"><li><a href="">A-Z List</a></li><li><a href="">

Link to site

If you view the page in FF, the main page (General Information) doesnt extend all the way to the bottom of the browser. I think it's lacking text, because if you visit the other pages, it works fine.

This works regardless under IE. I'm stumped!