CSS - Position Different In Explorer

Hey guys, sorry if I'm asking something that's been addressed before, but just couldn't find an answer anywhere, and thought one of you genii might be able to help....

Anyway, I'm tackling my first CSS layout, and it's going pretty well so far. Cross-browser testing hasn't gone nearly as bad as I expected.

asiabackpacker.com/ai-resource/

But there's one problem I just can't figure out. Here's a screenshot: asiabackpacker.com/ai-resource/images/14015507.jpg

In Internet Explorer 6 on Windows XP, my header Div appears one pixel to the left. It looks fine on IE6 on any other OS, and even in IE 7 on Windows XP, but for some reason the IE6 + Windows XP combo is producing this weird result.

Is this a known bug that anyone's aware of, and is there any solution?

(btw, the forum rules made me strip the http's out of my urls....sorry bout that)

Hi All;

I generated this page :

www.lilahd.com/bevi

In webgen and cannot view it correctly on IE . Please view the page in IE and then in Firefox . Why does that happen .

Hi i was wondering if i could get a hand with some css i have, its working properly on firefox but its not working with explorer ( i have the ie7 patch)...

Ive included the css i think its #header3b1 causing the problem...

Code:

@charset "UTF-8";
/* CSS Document */

/* CSS Document */

body {
background-color:#F5E9D9; margin:0; color:#4D4747;
}
img {
	border:none;
}
div, h2, a, img, p {
	margin:0; padding:0;
}
.spacer {
	line-height:0; font-size:0; clear:both;
}
#frame {
width:761px;
height:895px;
background-color:#F5E9D9;
margin:auto; color:#4D4747;
}

#container1 {
width:751px;
height:142px;
padding-left:5px;
padding-right:5px;
float:left;
background-color:#F5E9D9; color:#4D4747;
}

#header1 {
width:185px;
height:142px;
background-color:#551001;
float:left; color:#4D4747;
}

#header2 {
width:280px;
height:102px;
float:left;
padding-left:24px;
padding-top:40px;
}

#header3 {
width:262px;
height:142px;
float:right;
}

#header3a {
width:240px;
height:43px;
background-color:#F5E9D9;
float:right;
padding-top:67px;
padding-right:22px;
text-align:right;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#AA8780;
}

.nav a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#AA8780; background-color:inherit;
font-weight:normal;
text-decoration:none;
}

.nav:hover{
	color:#6D2517; background-color:inherit;
}

#header3b {
width:262px;
height:32px;
}

#header3b1 {
float: left;
width:185px;
height:350px;
background-color:#551001;
display: block;
}

#header3b2 {
width:50px;
height:32px;
background-repeat:no-repeat;
background-position:top right;
}

#container2 {
width:751px;
height:195px;
padding-left:5px;
padding-right:5px;
}

#container2a {
width:489px;
height:195px;
float:left;
}

#container2b {
width:260px;
height:193px;
border:1px solid #F2DBBA;
float:right;
}

#container2b1 {
width:220px;
height:Auto;
margin:auto;
padding-top:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
}

.container2b2 {
width:200px;
height:22px;
padding-left:20px;
margin:auto;
}

.links {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#551001; background-color:inherit;
font-weight:bold;
text-decoration:none;
}

.links:hover {
	color:#C15740;background-color:inherit;
}

#container3 {
width:751px;
height:350px;
padding-left:5px;
padding-right:5px;
}

#container3a {
width:151px;
height:498px;
background-color:#551001;
float:left; color:#4D4747;
padding-left:34px;
}

.container3a1 {
width:121px;
height:24px;
border-top:1px solid #AA8880;
padding-left:22px;
padding-top:7px;
}

#container3b {
width:304px;
height:495px;
float:left;
margin:0 0 12px;
overflow: hidden;
}
#container3bb {
width:550px;
height:495px;
float:left;
margin:0 0 12px;
}

#container3b1 {
width:240px;
height:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#4D4747;
font-weight:normal;
text-decoration:none;
margin:16px 32px 0px 32px;
text-align:justify;
line-height:14px; background-color:inherit;
}
#container3b1 h2 {
	height:33px; text-indent:-2000px;
	background:url(images/welcome.gif) 0 10px no-repeat;
}

.container3b2 {
width:240px;
height:28px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FF0000;
font-weight:normal;
text-decoration:none;
margin:0px 0px 0px 32px;
text-align:right;
background-color:inherit;
}
.container3b2:hover {
color:#830202; background-color:inherit;
}

#container3b3 {
width:227px;
height:28px;
padding-left:13px;
padding-top:9px;
margin:0px 32px 0px 32px;
text-indent:-2000px;
}

#container3b4 {
width:238px;
height:202px;
margin:0px 32px 0px 32px;
background-repeat:no-repeat;
background-position:top right;
}

#container3b4a {
width:100px;
height:176px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:14px;
padding-left:10px;
padding-top:15px;
}

.brown {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#7E1A02; background-color:inherit;
	text-decoration:none;
	font-weight:normal;
}
.brown:hover {
color:#3B0B00; background-color:inherit;
text-decoration:underline;
}

#container3c {
width:262px;
height:490px;
float:left;
margin:0 0 12px;
}

.container3c1 {
width:231px;
height:30px;
background-color:#AC3A02; color:#4D4747;
padding-top:7px;
padding-left:9px;
margin-top:22px;
}
.container3c1 h2 {
	background:url(images/specials.gif) 0 0 no-repeat; text-indent:-2000px;
}
.container3c11 {
width:231px;
height:30px;
background-color:#AC3A02; color:#4D4747;
padding-top:4px;
padding-left:9px;
margin-top:22px;
}
.container3c11 h2 {
	background:url(images/gallery_side.gif) 0 0 no-repeat; text-indent:-2000px;
}
.special {
	margin-top:55px;
}
.special h2 {
	background:url(images/some_specials.gif) 0 0 no-repeat; text-indent:-2000px;
}
#container3c2 {
width:233px;
height:350px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-image:url(images/special.jpg);
border-bottom:1px solid #F2DBBA;
border-left:1px solid #F2DBBA;
border-right:1px solid #F2DBBA;
background-repeat:no-repeat;
background-position:bottom left;
}
#container3c22 {
width:233px;
height:170px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#F2DBBA;
border-bottom:1px solid #F2DBBA;
border-left:1px solid #F2DBBA;
border-right:1px solid #F2DBBA;
background-repeat:no-repeat;
background-position:bottom left;
}
#container3c2a {
width:104px;
height:350px;
float:right;
padding-right:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
text-decoration:none;
font-weight:normal;
line-height:12px;
}

#container3c2a1 {
width:80px;
height:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
font-weight:normal;
text-align:justify;
float:right;
padding-left:24px;
}

.container3c2a2 {
width:188px; color:#4D4747;
height:179px;
background-color:#F5E9D9;
border-bottom:1px solid #F2DBBA;
border-left:1px solid #F2DBBA;
border-right:1px solid #F2DBBA;
padding-left:25px;
padding-right:25px;
padding-top:22px;
}

.img {
width:99px;
height:86px;
float:left;
}
.img1 {
width:99px;
height:79px;
float:left;
}

.text {
width:80px;
height:78px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
line-height:12px;
float:right;
text-align:justify;
}

.dummy  {
clear:both;
}

a {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
text-decoration:none;
font-weight:normal;
text-align:right;
}

a:hover {
color:#B25B46; background-color:inherit;
text-decoration:underline;
text-align:right;
}

.blank {
width:186px;
height:86px;

}

#container4 {
width:751px;
padding-left:5px;
padding-right:5px;
background-color:#F5E9D9; color:#4D4747;
margin:0px 0px 0 0px;
}

#container4a {
width:489px;
height:22px;
background-color:#E0E0E0; color:#4D4747;
float:left;
padding-top:10px;
}

#container4b {
width:262px;
height:22px;
background-color:#551001;
float:right;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
padding-top:10px;
}
#container4 p {
	text-align:center; clear:both; padding:15px 0;
	font:12px/18px Arial, Helvetica, sans-serif;
}
.scroller {
overflow-y: auto;
overflow-x: hidden;
}

any ideas, thanks

Hey guys. I found some CSS code that will causes the latest IE 6 browsers to display an error reporting window if the service is running and close IE. It works on two computers. A celeron 1.2GHz and an Athlon 2600+.

Here is the original code that IE works fine with.
Code:

/*nav.css*/
#nav *{font: small-caps normal 98%/1em sans-serif;display:block;}
#nav * a{color:#9fb594;display:block;}
#nav_list,#nav,#nav_main{float:left;clear:none;}
#nav_main{background-image:url('../image/nav_bg.png');background-repeat:repeat-y;width:122px;}
#nav_foot{background-image:url('../image/nav_foot.png');background-repeat:no-repeat;height:177px;width:122px;}
#nav_foot{font: small-caps normal .6em/1em sans-serif;}
#nav_foot a{width:105px;margin-top:2px;vertical-align:bottom;}
#nav * ul{list-style-type:none;padding:0;margin:0;}
#sub_nav_list{background-color:#000;text-align:right;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a{width:105px;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a,#sub_nav_list,#nav_foot{float:left;clear:both;}
.nav_item{height:2.2em;}
.sub_nav_item a{padding-bottom:.5em;min-height:1em;}
.selected a.nav_hlink{font:normal small-caps 900 98%/1em sans-serif;}
#nav_main * a:hover{background-color:#333;}

The last item, the hover, is what is changed.
Code:

/*nav.css*/
#nav *{font: small-caps normal 98%/1em sans-serif;display:block;}
#nav * a{color:#9fb594;display:block;}
#nav_list,#nav,#nav_main{float:left;clear:none;}
#nav_main{background-image:url('../image/nav_bg.png');background-repeat:repeat-y;width:122px;}
#nav_foot{background-image:url('../image/nav_foot.png');background-repeat:no-repeat;height:177px;width:122px;}
#nav_foot{font: small-caps normal .6em/1em sans-serif;}
#nav_foot a{width:105px;margin-top:2px;vertical-align:bottom;}
#nav * ul{list-style-type:none;padding:0;margin:0;}
#sub_nav_list{background-color:#000;text-align:right;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a{width:105px;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a,#sub_nav_list,#nav_foot{float:left;clear:both;}
.nav_item{height:2.2em;}
.sub_nav_item a{padding-bottom:.5em;min-height:1em;}
.selected a.nav_hlink{font:normal small-caps 900 98%/1em sans-serif;}
#nav_main * a:hover{background-color:#333; width:80%;margin:auto; }

This works fine in Firefox, doesn't look too good. I'm trying to figure something out so that when it's actived it looks kinda like the buttons used in a lot of linux console setup programs. Like the nvidia driver installer and the slackware setup buttons. Trying to figure out how to make this crapy looking site look better. I guess stupid "animations" based on linux console isn't the best way to go :P

i have a div on a page that i want to be centered. i am using in css as
Code:

margin: 0 auto

that works fine and is centered in firefox, but is left aligned in internet explorer.
how to accompalish it in iexplorer ??

Hey people.

i have created a "fixed" toolbar for my website and runs fine in both safari and firefox... however in IE 6 and 7 the toolbar gets stuck and does not flow with the page. i used a fix which makes it apear in the right place this can be found he
http://tagsoup.com/cookbook/css/fixed/

here is the website so far, try opening it in both IE and another brouser too see the difference.
http://people.brunel.ac.uk/~dt08ajm/playgroundtest/

any ideas on how i can fix it? i can post the code if needed.

thanks in advance.

Hi,
I thought I fixed this problem before. In the videos playlist at the bottom, video description (background black). It needs to be positioned 20 pixels down. You will understand it better if you view it in Firefox.

http://pangeaadvisors.org/default.asp


Code:

#content #videos .playlist { float:left; width:442px; height:292px; margin:10px 0; background:#FFFFFF url(images/bg_videoplaylist.gif) repeat-x; background-position:-1px 0; border:1px solid #083684; position:relative; overflow:hidden; }
#content #videos .playlist .entries { position:absolute; width:10000em; height:60px; }
#content #videos .playlist .entries .video { float:left; width:422px; height:60px; font-size:14px; font-weight:bold; text-decoration:none; padding:20px; background:transparent url(images/player_entry.gif) 0 0 no-repeat; }
#content #videos .playlist .entries .playing {	background-position:0px -80px; }
#content #videos .playlist .entries .paused { background-position:-432px -80px; }
#content #videos .playlist .entries .progress { opacity:0.8; }
#content #videos .playlist .entries em { float:right; color:red; font-style:normal; margin:14px; }
#content #videos .playlist .entries .description { float:right; width:442px; height:212px; background:#000 url(http://flowplayer.org/img/player/btn/play_large.png) right bottom no-repeat; }
#content #videos .playlist .entries .description p { color:#FFF; width:422px; height:192px; font-size:12px; font-weight:none; text-decoration:none; padding:10px; position:absolute; }

Hi, for reasons unknown my template is being displayed towards the far right of the browser in Internet Explorer...It works fine in Firefox (page is centered) but I am rather confused as to why it is being displayed so strangely in IE? Help would be appreciated.

Site: www dot 21healthconsult dot com

CSS:

Code:

    /* Generic Selectors */ 

   div.wrapper {
   height: 100%;
   width: 950px;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
   }

    body { 

    font-family: Georgia, "Times New Roman", Times, serif;

    font-size: 14px; 

    color: #000000;

    background-color: #FFFFFF; 

    } 

    p { 

    width: 100%; 
    text-align: left;

    }

    h1 { 

    font-family: Georgia, "Times New Roman", Times, serif; 

    font-size: 18px; 

    font-weight: bold; 

    color: #000000; 

    } 

	
    h2 { 

    font-family: Georgia, "Times New Roman", Times, serif; 

    font-size: 14px;

    font-weight: none; 

    color: #000000; 

    border-bottom: 1px solid #E0E0E0; 

    } 



 
    /**************** Pseudo classes ****************/ 

    :link { 

    color: #0066FF; 

    text-decoration: none; 

    font-weight: none; 

    } 


  li {

      list-style-type: disc; 

      line-height: 150%; 

      } 


    li :link { 

    color: #0066FF; 

    text-decoration: none; 

    font-weight: bold; 

    } 

    
	:visited { 

    color: #0066FF;

    text-decoration: none; 

    font-weight: none; 

    } 


    li :visited { 

    color: #0066FF; 

    text-decoration: none; 

    font-weight: bold; 

    } 

    :hover {

    color: #0066FF;

    padding-bottom: 5px; 

    font-weight: none;

    text-decoration: underline; 

    } 

    li :hover { 

    display: block; 

    color: rgb(0, 96, 255); 

    padding-bottom: 5px; 

    font-weight: bold; 

    border-bottom-width: 1px; 

    border-bottom-style: solid; 

    border-bottom-color: #C6EC8C; 

    } 


   :active { 

    color: #0066FF; 

    font-weight: none; 

}
   
   


    /************************* ID's *************************/ 


    #header {

    position: absolute;

    width: 900px;

    height: 50px;

    margin: 0;

    margin-top: 15px;

    padding: 0 0 50px 50px; /*top right bottom left*/

    text-align: left;

    }

    #t_navigation { 

    position: absolute;

    z-index: 10; 

    width: 900px; 

    height: 50px; 

    margin: 0; 

    margin-top: 48px; 

    padding: 0 0 50px 300px; /*top right bottom left*/

    font-weight: normal; 

    font-size: 11;

    text-align: left;

    } 

    #search_frame {

    position: absolute;

    z-index: 10; 

    margin: 0; 

    margin-top: 15px; 

    padding: 0 0 0 300px; /*top right bottom left*/

    width: 600px;

    }

#search_box {
background-color: #F0F0F0; 
width: 600px;
height: 28px;
}

#search_box #s {
float: left;
padding: 0;
margin: 6px 0 0 0;
border: 0;
width: 569px;
background-color: #F0F0F0; 
font-color: #000000;
}

#search_box #go {
width: 27px;
margin: 3px 4px 0 0;
font-color: #000000;
float: right;
}

    #l_navigation { 

    position: absolute;

    z-index: 10; 

    width: 210px; 

    height: 600px; 

    margin: 0; 

    margin-top: 80px; 

    padding: 0 0 50px 50px; /*top right bottom left*/

    border-right: 1px solid #E0E0E0; 

    font-weight: normal; 

    text-align: left;

    } 

   
    #centerDoc { 

    position: absolute; 

    z-index: 15; 

    padding: 0 0 50px 300px; /*top right bottom left*/

    margin-top: 80px; 
    
    width: 900px;

    text-align: left;

    }

I have a div #footer at the bottom of a page.

All works except in MSIE (v6) where ol' Bill Gates decides to duplicate the #footer:
http://www.jobsinkent.com/v5c/home/index.php

If I remove the float:left from #footer it displays fine (but out of position!!) ... ideas welcome!!

Hi

I have been working on this all day, and am starting to see double
This site plays nice on all browsers except IE , the top menu that is
lastchancemusic.gr/testing/
could anyone please help

I am trying to see what is the problem at my css with internet explorer , banner is appearing over the text however in firefox, safari or opera it works fine.

Please check it he
ucables.com

css style used is he
ucables.com/account/styles/ucables.css

Please can you help me to find what is the problem i dont know what internet explorer bug is causing this problem

THank you in advance

I am trying to see what is the problem at my css with internet explorer 6.0, all text is put at the bottom of the page, however in firefox, safari or opera it works fine.

Please check it he
ucables.com/search/iphone

css style used is he
ucables.com/account/styles/ucables.css

Please can you help me to find what is the problem i dont know what internet explorer bug is causing this problem

THank you in advance

OK basically this css code is causing problems in IE.5 OS/9 on the mac

I was wondering if the Windows version caused the same problems when rendering these css buttons:


#elButton a {
color: white;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-align:center;
text-decoration: none;
border:3px outset #99ccff;
background-color: #3399ff;
display: block;
margin: 1px;
width: auto;
height: 2.5 em;
padding: 3px 5px 0;
}

#elButton a:hover {
background-color: #D43D2A;
color:#ffffff;
padding-left:5px;
border:3px inset #ffffff;
}

==============================================
html code:

<DIV id="elButton">
<DIV><A href="#" onclick="img(1)">Next</A></DIV>
<DIV><A href="#" onclick="img(-1)">Prev</A></DIV>
</DIV>

THANKS GUYS !!

I have my website look exactly how I want it on Firefox and Safari. I checked it on IE 7 and it looks all out of wack! My design is a 3 column design with a column on the left that has a menu, the middle column has my content so far, and the right column is reserved for banners and links. The problem with IE is the left and right column meet and overlap in the middle of the page. How can I fix this without messing it up for the other browsers? my site is at www. highartculture .com. Thank you very much.

Hello, I have been spending hours on tutorials of css only to find some things work in one browser, while not in others. I would like to find a tutorial which only applies to IE CSS1(2) OR IE & Netscape css1(2). Is there such beast?