|
CSS - Stacking Ul's ... Fine In Ie6 & Ff2/3
The code below works perfect in FF2/FF3 and IE6 ...
In IE7 the first UL is perfect, but the 2nd UL is vertical (not horizontal) If you have any suggestions on how to improve my CSS that would be appreciated to. Its kind of a mess because I have been pulling my hair out for the last 3 hours trying to get the 2nd UL to render horizontally rather than vertically. Code: <title>Untitled Document</title>
<style type="text/css">
body
{
margin: 0 auto;
padding: 0 auto;
}
#lottoNumbersWrapper
{
float: left;
width: 700px;
height: 118px;
background-image: url(images/structural/lottoNumbersBG2.jpg);
background-repeat: no-repeat;
border: 0px solid black;
}
.lottoNumbers
{
margin: 0;
margin-right: 20px;
margin-top: 10px;
padding: 0;
border: 0px solid black;
}
.lottoNumbers li {
list-style: none;
list-style-type: none;
float: left;
font-size: 13px;
height: 40px;
width: 45px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-position: center;
background-repeat: no-repeat;
border: 0px solid black;
cursor: pointer;
}
.lottoNumbers li.white
{
background-image:url(images/whiteDot.gif);
}
.lottoNumbers li.blue
{
background-image:url(images/BlueDot.gif);
}
.lottoNumbers li span {
display: block;
margin-top: 12px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #000;
}
</style>
</head>
<body>
<div id="lottoNumbersWrapper">
<div style="float: right; border: 0px solid black">
<ul class="lottoNumbers">
<li class="white"><span>14</span></li>
<li class="blue"><span>4</span></li>
<li class="white"><span>9</span></li>
<li class="white"><span>12</span></li>
<li class="white"><span>14</span></li>
<li class="blue"><span>18</span></li>
<li class="white"><span>20</span></li>
<li class="white"><span>21</span></li>
<li class="blue"><span>26</span></li>
<li class="white"><span>33</span></li>
</ul>
</div>
<br />
<div style="float: right; border: 0px solid black">
<ul class="lottoNumbers">
<li class="white"><span>14</span></li>
<li class="blue"><span>4</span></li>
<li class="white"><span>9</span></li>
<li class="white"><span>12</span></li>
<li class="white"><span>14</span></li>
<li class="blue"><span>18</span></li>
<li class="white"><span>20</span></li>
<li class="white"><span>21</span></li>
<li class="blue"><span>26</span></li>
<li class="white"><span>33</span></li>
</ul>
</div>
</div> <!-- END LOTTO NUMBERS WRAPPER -->
</body>
</html>
Similar Tutorialshttp://www.refinethetaste.com/step3.htm Can someone tell me why this page appears perfectly fine with ie but appears awfully wrong with firefox. I am almost done with the project, please help..... s.o.s Code:
style>
/*review order*/
#checkoutprocess { width:576px; float:left; margin-right:2px; }
#checkoutprocess .checkoutprocess { float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#checkoutprocess h1 { height:30px; font-size: 18px; color:#716759; line-height:30px;}
#checkoutprocess .checkoutprocess .thdesc { float: left; width:264px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; }
#checkoutprocess .checkoutprocess .th { float: left; width:70px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#checkoutprocess .checkoutprocess .thh { float: left; width:568px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; }
#checkoutprocess .checkoutprocess .tddesc { float: left; width:274px; height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .color { float: left; width:70px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .noncolor { float: left; width:70px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .intprice { font-weight:bold; }
#checkoutprocess .hline { border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }
#checkoutprocess img#updatesbasket { float:left; width: 141px; height: 15px; border: 0px; }
#checkoutprocess img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#checkoutprocess img#contshopping { float:right; width: 141px; height: 25px; padding-right:50px; border: 0px; }
#checkoutprocess img#checkout { float:right; width: 89px; height: 25px; border: 0px; }
</style>
I added a tab content js to my main page. I did not change anything at css file. Area where I added tab content js works fine with Firefox but not with Internet Explorer. What happens with IE is that contents at the center of the page moves under. I am not sure if I clearly described the problem. Please take a look at: http://www.pearl.ru/isdunyasi/ Ok so I having been fooling around with this since last night and it all looks pretty good in all the browsers except for a couple nicks here and there, even with IE6... Here are the links to my site so that you guys can get and idea of what I am taking about: [URL=http://www.devine-decor.com/2] De'Vine Decor /URL] Alright so I only have 2 bugs, one shows up in Safari and the Other in IE6. First off in Safari for some weird reason my logo is placed under the navigation links instead of above it and I cant for the sake of me figure out why. I have tested it on a Mac in Firefox, Camino, Opera and it shows up fine. It even shows up fine in IE6 and 7... Weird... Alright so bug number 2 shows up in IE. When the page loads in IE it shows up fine but for some reason the links are not active. I can figure out why this happens. It is really really weir... Anyways if you guys could help it would be great. Here is the html for the page: Code: <div id="container"> <div id="shadow"> <div id="shadow_2"> <div id="wrapper"> <div id="wrapper_navbar" style="margin-bottom: 0px;"> <div id="logo"><img src="imgs/logo_left_part.png" height="138" alt="" border="0" /></div> <div id="navbar_content"> <div id="nav_btns_bg"><img src="imgs/nav_btns/nav_btns.png" width="225" height="360" alt="De'Vine Decor Navigation" border="0" /></div> <div id="nav_btns"> <div style="margin-top: 0px; z-index: 1;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src=this.src.replace(/off\.png/, 'on.').replace(/\.$/, '.png')" onmouseout="this.src=this.src.replace(/on\.png/, 'off.').replace(/\.$/, '.png')" /></a></div> <div style="margin-top: -25px; z-index: 1;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src='imgs/nav_btns/nav_bar_on.png'" onmouseout="this.src='imgs/nav_btns/nav_bar_off.png'" /></a></div> <div style="margin-top: -25px; z-index: 2;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src='imgs/nav_btns/nav_bar_on.png'" onmouseout="this.src='imgs/nav_btns/nav_bar_off.png'" /></a></div> <div style="margin-top: -24px; z-index: 3;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src='imgs/nav_btns/nav_bar_on.png'" onmouseout="this.src='imgs/nav_btns/nav_bar_off.png'" /></a></div> <div style="margin-top: -25px; z-index: 4;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src='imgs/nav_btns/nav_bar_on.png'" onmouseout="this.src='imgs/nav_btns/nav_bar_off.png'" /></a></div> <div style="margin-top: -25px; z-index: 5;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src='imgs/nav_btns/nav_bar_on.png'" onmouseout="this.src='imgs/nav_btns/nav_bar_off.png'" /></a></div> </div> </div> </div> <div id="wrapper_body"> <div id="content_top"><img src="imgs/test_image.png" height="350" width="650" alt="" border="0" /></div> <div id="quote_bar"><img src="imgs/quote_bar.png" height="350" width="650" alt="" border="0" /></div> <div id="overlay"><img src="imgs/image_overlay.png" height="350" width="650" alt="" border="0" /></div> <div id="content_bottom"><a class="txt"><?php echo nl2br($content); ?></a></div> </div> </div> </div> </div> <div id="shadow_b"><img src="imgs/shadow_bottom.png" width="1000" height="48" alt="De'Vine Decor" border="0" /></div> </div> And the css: Code:
html, body{
margin: 0px;
padding: 0px;
background: #93744d url(imgs/foreground.png) top repeat-x;
color: #131123;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
font-size: 12px;
text-align: center;
}
.txt {font-family: verdana, sans-serif; color: #663300; font-size: 11px; font-style:normall; font-variant: normal; font-weight: normal; text-decoration: none; line-height:22px; letter-spacing:1px;}
/* ------------------------------------------ MAIN DIVs ------------------------------------------ */
div#container {
position: relative;
width: 100%;
text-align: center;
vertical-align: top;
}
div#shadow {
position: static;
width: 1000px;
height: inherit;
margin: 0 auto;
text-align: center;
background: url(imgs/shadow_bg.png) top repeat-y;
}
div#shadow_2 {
position: static;
width: 1000px;
height: inherit;
margin: 0 auto;
text-align: center;
background: url(imgs/shadow_bg2.png) bottom no-repeat;
}
div#wrapper {
position: static;
width: 875px;
height: inherit;
margin: 0 auto;
text-align: center;
background: url(imgs/fleur_de_lys_pattern.png) top repeat;
}
/* ------------------------------------------ LEFT DIVs ------------------------------------------ */
div#wrapper_navbar {
display: table-cell;
width: 225px;
height: inherit;
vertical-align: top;
margin-left: -650px;
}
div#logo {
width: 225px;
height: 138px;
}
div#navbar_content {
display: table-cell;
width: 225px;
height: 360px;
text-align: center;
vertical-align: bottom;
}
div#nav_btns {
margin-top: -360px;
width: 225px;
height: 360px;
}
/* ------------------------------------------ BODY DIVs ------------------------------------------ */
div#wrapper_body {
display: table-cell;
width: 650px;
height: inherit;
background: #eeeeee;
vertical-align: top;
margin: 0 0 0 225px;
}
div#content_top {
width: 650px;
height: 350px;
}
div#overlay {
z-index: 50;
width: 650px;
height: 350px;
margin-top: -350px;
}
div#quote_bar {
z-index: 40;
width: 650px;
height: 350px;
margin-top: -350px;
}
div#content_bottom {
width: 610px;
padding: 20px;
height: auto;
background: #eeeeee url(imgs/text_bg.png) top repeat-x;
text-align: left;
}
/* ------------------------------------------ BOTTOM DIVs ------------------------------------------ */
div#shadow_b {
position: static;
width: 1000px;
height: 48px;
margin: 0 auto;
text-align: center;
}
Hey, I found a script that enlarges a picture when you hover over it. I edited the script a bit to fit my needs. However, the whole script works fine except that in IE there's a stacking problem. The enlarged image is shown below the thumbnail image (when you hover over the thumbnail image). This is how it looks in IE: http://img122.imageshack.us/img122/6428/errorbm9.jpg And this is how it should look (chrome): http://img122.imageshack.us/img122/4663/correctax8.jpg I tried to set the z-index of the enlarged image to 2 and that of the thumbnail to 1, but that doesn't seem to work. the css: Code: .hoverbox{ /* For the list (ul tag) */
float: left;
cursor: default;
list-style: none;
width: 80%;
}
.hoverbox a{
cursor: default;
}
.hoverbox a .preview{ /* hide the enlarged picture by default*/
display: none;
}
.hoverbox a:hover .preview{ /* the enlarged image settings */
display: block;
position: absolute;
top: 50px;
left: 50px;
}
.hoverbox img{ /* the default settings for all images */
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
}
.defaultImg{ /* width of the thumbnail image */
width: 100px;
height: 75px;
}
.hoverbox li{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.hoverbox .preview{
border-color: #000;
}
The html for the images Code: <ul class="hoverbox"> <li> <a href="#"><img src="images/pictures/thumbnails/foto1.jpg" alt="description" class="defaultImg"/><img src="images/pictures/foto1.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/pictures/thumbnails/foto2.jpg" alt="description" class="defaultImg" /><img src="images/pictures/foto2.jpg" alt="description" class="preview" /></a> </li> </ul> Does anyone have a solution to my problem? Thanks in advance Im having a few issues with the layout of a clients website. I have a three column grid and what I want to do is switch between different column combos, stacked down the page. The problem I have is that the far right column always creeps up to the bottom of the div above it. I've tried heaps of round-about methods but nothings working. I must be missing something painfully obvious. I cant figure out how to post images because I'm a newer user, so try follow these links to get a better understanding: Heres the Current layout: w w w. timdonaldson . com/random/as_is.jpg And Here is the grid I want: w w w. timdonaldson . com/random/if_only.jpg I hope there is a simple solution to this. Thanks in advance for any help. I have an absolutely positioned <div> that is intended to over some content directly below it. This content is contained within a relatively-positioned <div> which seems to be causing it to display in front of the absolutely-positioned <div> regardless of what the z-index is set to. Here is a simplified example of my problem: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stacking Order Test</title>
</head>
<body>
<div style="position:relative;">
<div style="position:absolute;background:green;height:55px;top:5px;left:5px;z-index:100;">I should be at the top of the stacking order.</div>
</div>
<div>
<div style="position:relative;background:red;height:300px;">
If you can read this, I am higher in the stacking order than the green <div>
</div>
</div>
</body>
</html>
The only way that I can get the absolutely-positioned <div> to display at the top of the stacking order as it should is to remove the relative positioning from the other <div>. Unfortunately, for several reasons, this is not an option. This is only happening in IE6 and 7. Anyone have any any ideas? I'm completely stumped on this problem. I need part of this html page to have transparency, but then have completely opaque text on top of that. Since anything within a div with transparency automatically inherits that transparency, I decided to fix that by layering an opaque div over the div with transparency. This works wonderfully in FF3 and Safari. However, IE7 is giving me fits (no surprise here). The divs simply will not layer. I believe that the problem is because z-index is overloaded by IE7, but I can't find a workaround that works for it. Can anyone else? I really appreciate the help! The complete html is: <head> <title>Example</title> <style type="text/css"> body { margin:0px 0px 0px 0px; background-color:white; } .wrapper { height:425px; width:520px; background-color:cyan; margin-left:auto; margin-right:auto; top:0px; } .midbox { height:280px; width:520px; } .shaded { position:relative; z-index:0; height:95px; width:520px; background-color:yellow; filter:alpha(opacity=50); /* for IE */ -moz-opacity:0.5; /* for older browsers */ -khtml-opacity:0.5; /* for older browsers */ opacity:0.5; } .unshaded { float:left; position:relative; z-index:1; filter:alpha(opacity=100); /* for IE */ -moz-opacity:1.0; /* for older browsers */ -khtml-opacity:1.0; /* for older browsers */ opacity:1.0; height:95px; width:520px; } .bigName { position:relative; border-style:none; font-family:Arial Unicode MS; font-size:50px; width:250px; height:55px; } .bigUsername { position:relative; border-style:none; font-family:Arial Unicode MS; font-size:15px; width:250px; } </style> </head> <body> <form id="form1"> <div class="wrapper" > <div id="divTop" class="unshaded"> <table width="320px"><tr><td align="center"> <input type="text" name="theirName" value="Foo" size="15" class="bigName" readonly="readonly" /> <br /> <input type="text" name="theirUsername" value="bar" size="15" class="bigUsername" readonly="readonly" /> </td></tr></table> </div> <div id="divTopS" class="shaded"></div> <div id="divMid" class="midbox"> <!--some stuff here--> </div> <div id="divBot"class="unshaded"> <input type="submit" value="a button" /> </div> <div id="divBotS" class="shaded"> </div> </div> </form> </body> </html> Hi All, A seemingly simple problem which has me pulling my (already thinning) hair out: I'm working on a simple page header: a 100px-wide image floated to the left, a 150px wide div filled with text floated to the right. I need the header to stretch to fit the whole page, which is easy enough: float the image to the left, float the div to the right. Now, if a user shrinks the browser to, lets say 200px wide, it's forcing the div to stack below the image. I would like for it get closer and closer to the image as the browser is narrowed, until it's sitting just beside it. I can do this with a min-width on a container div, but of course, that doesn't work on IE--and I'd rather not use the "expression" min-width hack. I could do it with a table, but I'm trying to go table-free if I can. It seems like something that should be easy as pie, but I'm finding that it's more akin to baking a souffle. Thanks, all. rjgfx Good day! I have exhausted all of the people I could ask regarding this so I'm hoping I may get help here. This is the first website I've made and it's causing a lot of problems. http:// www . sycwin . com / index2 . html My issue is that my website is browser compatible with everything BUT IE. My problem is getting it to look the same on IE as it currently looks now on Firefox. I understand that there are java script solutions for div stacking problems, but for some reason those are causing no effects problems: 1. subinfo not positioning over mainwrapper and is instead STACKING on top of mainwrapper on IE 2. introduction not in position to the right of carousel/slideshow on IE 3. paints and wires divs are messed up in width, padding and margin on IE here's the css: Code: body {
color:#333333;
background-color: #f5f5ef;
background-image:url(images/bg.jpg);
background-repeat:repeat;
font-family:Arial, Helvetica, sans-serif;
line-height: 18px;
font-size:11px;
padding:0px;
margin:0px;
}
emphasis {
background-color:#e7d018;
}
strong {
color:#2b6934;
}
a:active, a:link, a:hover, a:visited {
border:none;
text-decoration:none;
}
img {
border:none;
}
/*MAIN SEGMENTS*/
#mainwrapper{
width:1000px;
margin:0 auto;
margin-top:-20px;
margin-bottom:-50px;
z-index:900;
overflow:hidden;
}
#contentwrapper {
width:1000px;
margin-bottom:-10px;
}
#header {
background-image:url(images/header.png);
background-repeat:no-repeat;
height:492px;
margin-top:-15px;
width:1000px;
float:none;
}
#footer {
width:1000px;
height:222px;
background-image:url(images/footer.png);
background-repeat:no-repeat;
background-position:bottom;
margin-top:-300px;
padding-top:-300px;
margin:0 auto;
}
/*SUBINFO*/
#subinfo {
width:220px;
position:relative;
top:0px;
right:35px;
float:right;
z-index:1000;
}
#blurb {
width:220px;
height:165px;
color:#FFFFFF;
background-image:url(images/blurb_01.png);
background-repeat:no-repeat;
text-align:center;
padding-top:380px;
padding-bottom:64px;
font-size:11px;
}
.call {
font-size:22px;
padding-top:20px;
font-weight:bold;
line-height:20px;
}
#contact {
width:220px;
background-image:url(images/blurb_02.png);
background-repeat:no-repeat;
font-size:14px;
line-height:20px;
text-align:center;
padding-top:5px;
}
#blurb strong {
color:#FFFFFF;
}
.blurbheader {
font-size:20px;
font-weight:bold;
}
.blurbsubtext {
font-size:14px;
font-weight:bold;
}
#credits {
text-align: center;
font-size:9px;
line-height:14px;
padding-top:80px;
}
/*CONTENT*/
#content {
width:700px;
background-image: url(content-bg.png);
background-repeat:repeat-y;
padding-right:250px;
margin-top:-240px;
padding-left:44px;
}
#slideshow {
width:460px;
padding-left:10px;
height:360px;
float:left;
padding-bottom:20px;
overflow:hidden;
}
#write-up {
width:210px;
height:360px;
padding:8px 0 20px 10px;
margin-left:470px;
}
#products {
width:680px;
padding-right:10px;
margin: 0 auto;
margin-top:20px;
}
#products td {
width:160px;
padding-bottom:5px;
text-align:center;
}
#products-wires {
width:660px;
margin: 0 auto;
margin-top:20px;
}
#products-wires td {
width:220px;
text-align:center;
}
.product-header {
font-family:Gotham, Helvetica, Arial, sans-serif;
text-align:left;
font-size:25px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-2px;
line-height:14px;
}
#introduction {
width:680px;
font-size:11px;
line-height: 18px;
text-align:left;
overflow:hidden;
}
#paints{
margin-right:18px;
width:290px;
padding:20px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
float:left;
margin-bottom:20px;
}
#wires {
margin-left: 348px;
width:290px;
padding:20px;
margin-right:10px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
margin-bottom:20px;
}
.product-brand {
background-color:#314842;
color:#FFFFFF;
font-family:Gotham, Helvetica, Arial, sans-serif;
font-weight:bold;
text-transform:uppercase;
text-align:left;
letter-spacing:2px;
font-size:12px;
padding-left:5px;
}
/*ROLLOVER*/
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
text-align:center;
z-index:3;
}
#preview img{
width:300px;
height:300px;
}
/*CAROUSEL*/
#carousel ul {
list-style: none;
width:3600px;
margin: 0;
padding: 0;
position:relative;
padding-left:10px;
height:350px;
float:left;
padding-bottom:20px;
}
#carousel li {
display:inline;
float:left;
}
#carousel {
overflow:hidden;
I hope you guys could help me figure this one out. I'm absolutely clueless. Thank you for taking the time to read this. I just uploaded this to my server, don't know what happend. It looked fine. The original question I had was how to fix the "right bar" to line up vertically, correctly with the left menu and center text...(something to do with the positioning). Either way, can someone help me out here...as you'll see I am not the best at CSS. Thanks. Code: <div style="position:absolute; left:207px; top:210px; width:427px; height:850px; z-index:3" id="center"> <div class="rightbar" style="position:absolute; left:649px; top:210px; width:140px; height:850px; z-index:4"> finally got everything lining up correctly in IE, but now the background color in not showing up in FF, but it does in IE here is my code and the bit in bold is what has the problem with the background color in FF also, is there a way to make the page end when the content ends? /* CSS Document */ /* basic elements */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #545838; background-color: #e9ebdc; background-image: url(images/bg.jpg); margin-top: 0px; } /* specific divs */ #page { background-color: #fdfdfb; width : 750px; padding : 0; margin : 0 auto; text-align : left; height : auto; border-left : 1px solid #000000; border-right : 1px solid #000000; } #headerimg { background-image : url(images/callmefarms.jpg); margin : 0 auto; width : 750px; height : 280px; padding : 0; } #topbar { background-image : url(images/header1.jpg); margin : 0 auto; width : 750px; height : 85px; padding : 0; } #content { float : left; width : 500px; height : auto; } #sidebar { float : left; width : 243px; height : auto; } #currentevents { background: #fdfdfb url(images/currentevents.jpg) no-repeat top left; margin-top: 0px; width: 500px; height: 75px; } #publications { background: #fdfdfb url(images/publications.jpg) no-repeat top left; margin-top: 0px; width: 500px; height: 100px; } #footer { background: #a2a876 url(images/footer.jpg); width : 750px; padding : 0; height: 75px; } #innercontent { float : left; width : 750px; height : auto; padding : 0; } #resources { background: #e9ebdc url(images/resources.jpg) no-repeat top left; width: 243px; height: 60px; text-align: center; } /* specific classes */ .clear { clear:both; font-size:0; line-height:0px; height:0; } First off, i'd like to say: So here's the code i'm screwin' with: ul.navlinks { font-weight: bold; background-color: #d7d7d7; margin: -5px -10px 0px -10px; padding: 0px 10px 1px 10px; border-bottom: 1px solid #2169AD; } Looks great in firefox (color fills the whole div) but in IE (i'm using 6.0), there's about 20 pixes to the right that arn't colored. Any suggestions? Thanks site css View the index in IE and FF... It is centered how I want it in IE (directly under the picture), but not in FF. How can I fix this? (I realize it's most likely a bug in IE that allows it to display the way I thought it was supposed to, so what's the right way to get this to work?) Thanks Enjoy your weekends Bryan i have a thick left hand border that does not show in firefox, the css is... Code: #container{
margin: 0 auto;
background-color:#ffffff;
width:465px;
border-left:335px solid #8FADB4;
border-right:1px solid #8FADB4;
border-top:1px solid #8FADB4;
border-bottom:1px solid #8FADB4;
background: url('images/br_logo.jpg') no-repeat bottom right;
}
does anybody know why the left border does not show? thanks See here The center column title. It is aligned properly in Firefox but is shifted in Internet Explorer. Ive been trying to figure out various way to fix the problem but cannot find the solution. Any tips ? These are my three classes for the content section: PHP Code: #content { margin-right:200px; text-align:left; background-color: #FFF; border: 2px solid #E3EEF5; } #content_header { background-image: url(images/layout/middlepanel/header_title_back.gif); width: 100%; height: 40px; } #content_inner { padding: 10px; color: #5A748C; } And here is my HTML: PHP Code: <div id="content"> <div id="content_header"><h1>Welcome to...... </h1></div> <div id="content_inner"> <? include("includes/homepageloremipsum.php"); ?> </div> </div> The trouble is that the 100% width on the content_header div for some reason shunts the div down by about 200px on IE. It sits at the top if I select 99% width or anything other than 100% width but then I have a gap on the right. Ive been at this for almost 6 days, searched the realm for help, googled, IRC'd, worked side by side with templates - even a 2 column setup and for some reason it can't render in IE. Also looked at the Tan hack, whitespace hacks.. Would you be so kind to tell me what I can do to make this work in IE? You can find the CSS by clicking Valid CSS, and html as you know- source. Thanks dearly Site Hi everyone! I'm pulling my hair out on this one. I must confess I'm a bit green when it comes to css, but I've been playing around with this page and was finally able to get it looking the way I want in IE. If you look at it in Firefox or Netscape, the container doesn't expand at the bottom, and the links just spill out. Any ideas on how I can get this to expand like it does in IE? http://www.gotop100.com/test.html Thanks! I have built a site using css for font styles. On my mac the fonts show up fine but when I view the site on Windows XP using Internet Explorer the fonts look kinda blurry/washed out. I'm using Arial, at 12px or 13px bold, as set in my CSS file. Is this a common problem, a way to fix the problem, or just my own problem? thanks for the help. Hi, I have been battling with this issue for a while now and need the community's help here. I am not the sole developer on this project and it's kind of difficult to work through other people's code - plus, I'm a developer, not a designer. Anyow. Have a look at this page: Article on Jakarta Globe Site I implemented the drop down for the 'share article' feature. I'm using scriptaculous and costum-built JS to achive the effect. It's all good in IE - but you can see that in FF, the bread crumbs jump to the right when the drop down is activated. I have tried to implement a 'clearit' div like this: CF Code: Code: <div class="article-body"> <div id="clearit"></div> CSS: Code:
#clearit {
display: block;
clear:both; }
With the effect, that in FF, the whole article jumps down a few pixels when the drop down is activated. (The bread crumbs don't jump to the right anymore. I'm at loss now. Here's the CSS code for the relavant div's: Code:
#article-heading {
border-top:solid 4px black;
background:url(../images/objects/module-head-bg.gif) repeat-x top; height:26px; }
.article-heading span {
display:block;
float:left;
padding:5px 15px 5px 10px;
height:16px; }
#slidedown_share {
position:relative;
width:123px;
height:137px;
background:#f4f2e6;
border-left: solid #000 1px;
border-right: solid #000 1px;
border-bottom: solid #000 1px;
text-align:left;
left:510px;
}
.article-body {
border-left:solid 1px black;
border-right:solid 1px black;
border-bottom:solid 1px black;
background-color:white;
padding:10px;
margin-bottom:8px;
font-size:11px;
}
Does anybody have an idea why this is happening and how I can avoid it? Thank you for your help Adrian |
|||||||