...

View Full Version : Firefox to IE CSS and Div bakground issues



<(^^<)KIRBY
02-22-2005, 10:53 PM
Ok, so here's my problem. I have a nice little background for my left div. However, the picture itself is about 147 pixels wide, and a logo that is also in the left div is about 500 pixels across. Now, in Firefox, the website looks great. The logo flows nice into the other div, and I have no problems. However, in IE, the background tiles horizontally to match the width of my logo. So, in essence, in FF, it looks like:

....
|LOGO|
....
....
....
....

However, in IE, it looks like:
.... .....
|LOGO|
.... .....
.... .....
.... .....
.... .....

I need the smaller background, otherwise all of the info I need to fit won't fit, which is a problem. Here's my CSS:



body {
background: #E8E8E8;
font: 16px Verdana, sans-serif;
}

#left {
width: 147px;
height: 100%;
background: url(../Pictures/crackback.gif);
float: left;
margin-right: 20px;
}
#right {
width: 75%;
float: right;
}
a:link {color: #104E8B;
text-decoration: none;
background-color: transparent }
a:visited { color: #4169E1;
text-decoration: none;
background-color: transparent }
a:hover { color: #00066;
text-decoration: underline;
background-color: transparent }
a:active { color: #A9ACB6;
text-decoration: underline;
background-color: transparent }
.title { text-align: center}
.floaty {
float: right;
}
#navlist
{
padding: 0 1px 1px;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 13em;
}

#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}

#navlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.8em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{
border-color: #000066;
color: #FFF;
background: #4169e1;
}
#good {
text-align:center;
}


Thanks for the help!

ronaldb66
02-23-2005, 09:24 AM
It would help a lot if you'd supply the markup as well; a link to the page in question would be even better.
The only background image I saw was on the element (?) with id "left"; since no repeat options were specified I see no reason why FF would not tile it in the same way IE does, but anyway. If you want to prevent the background image from tiling horizontally, add:

background-repeat: repeat-y;
to your styles.

If this does not solve your problem, supply the markup for more insight.


On second thought, the reason for IE not playing nice is because it interprets "width" as "min-width"; where FF forces your left element to 147px, having the logo spill out across the right, IE stretches it up until the logo fits.
You might want to reconsider that approach.

<(^^<)KIRBY
02-23-2005, 08:12 PM
Well, the website itself isn't posted yet... As soon as I can get some of this "little" stuff taken care of, then I will post it.

So, by the markup, I assume you mean the page in question? Well, here's the code for it.



<html>
<title> Marcon Inc.</title>
<LINK TYPE="text/css" HREF="styles/Marcon.css" REL="stylesheet">

<body>
<div id="left">
<background height= 1200px>
<br>
<br>
<img src="pictures/marconLogo.gif">
<br><br>
<!--** START NAVSTUDIO MENU TAGS (479422) **-->
<div id="vqp_about" style="position:absolute;visibility:hidden;">****JavaScript based drop down DHTML menu generated by NavStudio. (OpenCube Inc. - http://www.opencube.com)****</div>
<script language="JavaScript" vqptag="doc_level_settings" vqp_datafile0="MarconMenu.js" vqp_uid0=479422>cdd__codebase = "";cdd__codebase479422 = "";</script>
<script language="JavaScript" vqptag="datafile" src="MarconMenu.js"></script><script vqptag="placement" vqp_menuid="479422" language="JavaScript">create_menu(479422)</script>
<!--** END NAVSTUDIO MENU TAGS **-->
</div>
</div>
<div id ="content">
<br><br>
<br><br>
<br><br>
<br>
<h1><center>Welcome to MarCon, Inc.</center></h1>
<center>
<img src = "pictures/index.jpg">
</div>
</div>
</body>
</html>


I hope that helps... Please tell me if there's any other way I can help you help me. Thanks!

<(^^<)KIRBY
02-23-2005, 08:22 PM
Oh, is there something like a "max-width" or something like that I could put in? if so, I think that could solve my problem...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum