|
CSS - Strange <hr /> Quirk Ie/webbrowser Rendering Css Divs (how I Wasted My Morning)
Scenario: I have an MS-Access application that uses a webbrowser control to display help. WebBrowser is IE.
Suddenly the titles on my index page went missing ... no not missing. If I scrolled down and then scrolled back up they rendered. Sometimes rendering only partially (the bottom half of the words "Help Index" missing, top half rendered). The behavior replicated in the IE browser. Firefox and W3C meanwhile both indicated everything was groovy. Here was the context: Code: HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xml:lang="en" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Diverse Leader Program Database Help System: Index</title> <link href="css/dlpd0.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="tpage"> <div class="idxbar"><a href="index.html">Help Index</a></div> <div class="dlpdtitle">Diverse Leader Program Database</div> <div class="dlpdsubtitle">Help Index</div> etc. Odd. What's more the page was nearly identical to the dozens of other pages in the same help system. The css was innocent enough Code: CSS
.dlpdtitle {
background:#ffffff;
font-weight: bold;
font-size: 16px;
font-family: Arial, Helvetica, Sans-Serif;
color:#012345;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
Four hours later ... The culprit was this: Code: HTML <a name="userdoc"></a><hr /> Everything reverted to placid normalcy with just this: Code: HTML <a name="userdoc"></a> <br /><hr /> So ... there you have the results of my investigation into this very bizarre quirk that probably none of you will ever encounter. But if you do ... now you know ;-) I think it's time for my lunch break now ... Similar TutorialsIm making a shopping cart skin at work but im really stuck. The existing image was 532px wide, but ive changed it to 742 and something strange is happening to the image. Here is the link: http://hiq.identityprojects.co.uk The image in question is the long thin image of a room which is sitting on the right side. Im trying to get it sit within the white center box. Can anyone tell me what might be causing this to happen (since it was fine with the previous size image). Ive been looking through the code but I cant find any reason for it to be doing it, is an empty column, a float: center or something like that? I would provide the CSS, but there are pages and pages of it and I dont know what is relevant. If you know what part of the CSS code is causing it please tell me and I will post the snippet. I would really appreciate help with this. Hi, I've designed a site that looks excellent on IE and Firefox on a PC, as well as (as far as I've been told) Safari. However, I've seen a couple of instances on IE on a Mac where the menu doesn't render correctly. The page can be viewed here. On the problem browsers, the top menu items will be displayed in two stacks, rather than across the bottom of the image. If anyone out there has any idea why this is happening, I'd appreciate the help. The menu code in the HTML: Code: <table border="0" width="665" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="top"> <ul class="topmenuul" id="dmenu"> <li class="topmenuli"><a href="home.htm" class="topmenutitle">H O M E</a> </li> <li class="topmenuli"><a href="weddings.htm" class="topmenutitle">W E D D I N G S</a> </li> <li class="topmenuli"><a href="#" class="topmenutitle">P O R T R A I T S</a> <ul class="submenuul"> <li class="submenuli"><a href="authors.htm">Authors & Artists</a></li> <li class="submenuli"><a href="families.htm">Families</a></li> <li class="submenuli"><a href="musicians.htm">Musicians</a></li> </ul> </li> <li class="topmenuli"><a href="solo.htm" class="topmenutitle">S O L O</a> </li> <li class="topmenuli"><a href="#"class="topmenutitle">E M M A</a> <ul class="submenuul"> <li class="submenuli"><a href="bio.htm">Bio</a></li> <li class="submenuli"><a href="press.htm">Press</a></li> <li class="submenuli"><a href="contact.htm">Contact</a></li> </ul> </li> </ul> </td> </tr> </table> The CSS for the menu: Code: .topmenuul{
list-style-type:none;
margin: 0px;
padding:0px;
}
.topmenuli{
list-style-type:none;
float: left;
margin-left: 10px;
/* border-left:1px solid #000000; */
/* border-right:1px solid #000000; */
padding: 0px;
color: #000000;
}
.topmenutitle{
display:block;
color:#000000;
}
.topmenuli a:link {
color: #000000;
}
.topmenuli a:visited {
color: #000000;
}
.topmenuli a:hover{
display:block;
padding-top: 1px;
padding-bottom: 1px;
text-decoration:none;
color:#cccccc;
background:#fff;
width: 120px;
}
.submenuul{
list-style-type:none;
position:absolute;
margin: 0;
padding: 0;
display:none;
color:#000000;
}
.submenuli a{
display:block;
padding-top: 1px;
padding-bottom: 1px;
width: 120px;
text-decoration:none;
color:#000000;
background:#fff;
margin-top: 1px;
}
li:hover ul, li.over ul{ /* lists nested under hovered list items */
display: block;
}
#dmenu li>ul {
top: auto;
left: auto;
}
#content {
clear: left;
}
-->
#dmenu {
font-family: Georgia, Helvetica, Sans-Serif;
font-size:10px;
text-align:center;
font-color: #000000;
}
.topmenutitle {
background:#fff;
text-indent:0px;
text-decoration: none;
padding:0px;
padding-top: 1px;
padding-bottom: 1px;
color:#000000;
width: 120px;
}
.submenuul {
background-color:#fff;
background-position: top left;
}
.submenuli a{
text-decoration: none;
color: #000000;
padding-top: 3px;
padding-bottom: 3px;
}
.submenuli a:link{
color:#000000;
}
.submenuli a:visited {
color:#000000;
}
.submenuli a:hover{
text-decoration: none;
background:#fff;
color: #cccccc;
padding-top: 3px;
padding-bottom: 3px;
}
I am having a problem with a couple divs not rendering correctly. I'm building an online tournament bracket system, and I'd like the divs to be flush with each other, but in all browsers it's rendering incorrectly. css Code: Original - css Code <style type="text/css"> div { font-family: Arial, Verdana, "Times New Roman", sans-serif; font-style: normal; color: Black; } .gamecontainer { position: absolute; width: 120px; } .player { font-size: 12px; background-color: lightblue; width: 100%; text-indent: 0.5em; border: solid 1px; margin: 0px; padding: 0px; } .infoblock { border-right: solid 1px; font-size: 10px; width: 100%; text-indent: 0.5em; margin: 0px; padding: 0px; } </style>
html4 Code: Original - html4 Code <div id="W-R1-G1" class="gamecontainer" style="top: 10px; left: 1090px;"> <div id="W-R1-G1-P1" class="player">Player 1</div> <div id="W-R1-G1-I" class="infoblock" style="height: 20px;">W-R1-G1</div> <div id="W-R1-G1-P2" class="player">Player 2</div> </div> <div id="W-R1-G2" class="gamecontainer" style="top: 75px; left: 1090px;"> <div id="W-R1-G2-P3" class="player">Player 3</div> <div id="W-R1-G2-I" class="infoblock" style="height: 20px;">W-R1-G2</div> <div id="W-R1-G2-P4" class="player">Player 4</div> </div> <div id="W-R2-G1" class="gamecontainer" style="top: 30px; left: 1210px;"> <div id="W-R2-G1-P1" class="player">Player 1</div> <div id="W-R2-G1-I" class="infoblock" style="height: 45px;">W-R2-G1</div> <div id="W-R2-G1-P2" class="player">Player 2</div> </div> <div id="W-R1-G1" class="gamecontainer" style="top: 10px; left: 1090px;"> <div id="W-R1-G1-P1" class="player">Player 1</div> <div id="W-R1-G1-I" class="infoblock" style="height: 20px;">W-R1-G1</div> <div id="W-R1-G1-P2" class="player">Player 2</div> </div> <div id="W-R1-G2" class="gamecontainer" style="top: 75px; left: 1090px;"> <div id="W-R1-G2-P3" class="player">Player 3</div> <div id="W-R1-G2-I" class="infoblock" style="height: 20px;">W-R1-G2</div> <div id="W-R1-G2-P4" class="player">Player 4</div> </div> <div id="W-R2-G1" class="gamecontainer" style="top: 30px; left: 1210px;"> <div id="W-R2-G1-P1" class="player">Player 1</div> <div id="W-R2-G1-I" class="infoblock" style="height: 45px;">W-R2-G1</div> <div id="W-R2-G1-P2" class="player">Player 2</div> </div> Hi, i am getting a delay in the css rendering the position of divs, on my page, in ie6. This doesn't happen every time i load the page, but every so often certain floated divs are out of position and then they snap back into position after 2-10 seconds. Anybody suggest a solution??? The link to my stylesheet is in the header, so i can't imagine its to do with the stylesheet not loading up before the page is displayed. Thanks for your help Hi! I have a problem at andreaspohlmann.com with an (on win7) IE8 Problem, same problem on XP for FF and IE. The text underneath the start images should be the same format as the text underneath any of the gallery pics: see http://www.andreaspohlmann.com/wirtschaft/daimler/ difference between the two is first is nested 2 divs further, due to the slideshow and has a class instead of the id the style that should be applied is: (i used everything I could think of to disable inheritance) #bu h1, .bu h1, .caption { font-family:"Arial", Helvetica, sans-serif; background-color:none; color: #000; text-decoration: none; word-spacing: normal; text-align: right; letter-spacing: 0; text-indent: 0; line-height: 10px; font-size: 10px; font-weight: bolder ; font-style: normal; text-transform: lowercase; display:block; } Still IE8 makes it look smaller, adding 1px makes it too large. the styles seem to be exactly the same in the IE developer thingy. I'm at a loss, any help apreciated. Cheers, Chris. The situation is very simple. Just test the following code in IE7 or Mozilla, and then in IE6. You will note that in IE6 there's a gap below the two divs. HOw can I fix this ? Code: <style>
.fontBold,.fontBoldLink{ font-family:tahoma; font-size:14px; font-weight:bold; color:#333333;}
.fontTitle { font-size:16px;}
.fontBoldLink { text-decoration:underline; cursor:pointer;}
</style>
<div style="overflow:auto; margin-top:20px; margin-bottom:0px; border:0px #000000 solid">
<div class="fontBold" style="width:150px; float:left; text-align:center; padding-top:3px; border:1px #999999 dashed ; border-bottom:0px; background-color:#EFEFEF; height:20px;">Left Padding</div>
<div class="fontBoldLink" style="float:right;padding-left:20px; background-repeat:no-repeat">Right Padding</div>
</div>
<div style=" background-color:#EFEFEF; clear:both; border:1px #999999 dashed; padding:10px; height:60px; margin-bottom:10px; margin-top:0px "></div>
hello! My name is Marco, I'm italian, I hope nobody will be hurted by my english. Consider this code: Code: <html><head><style>
body
{
text-align: center;
}
#wrap
{
width: 100%;
background: yellow;
height: 400px;
}
#inside
{
width: 800px;
position: relative;
margin: 0px auto;
background: red;
}
</style></head><body>
<div id='wrap'><div id='inside'>
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
</div></div>
</body></html>
if you try to downsize the width of the browser window (to 100px, for example) the yellow background will move to left I hope the problem is clear exposed...thank you There's some really strange bug that only happens in Safari If you visit this, and click on any of the links in the left column or even the link to the page itself then the main content of the page get's shifted down. It doesn't make any sense, the document is exactly the same. Could someone enlighten me? Thank you! I'm modifying the Suckerfish dropdown menu, and while it looks perfect in FF, it's slightly off in IE (shocker, I know). In IE, the top-level menu items don't conform to the 20px height I've been using as a standard when you hover above them. I've done a ton of fiddling to see if I can solve the problem, but can't get it. I'm willing to bet the answer is simple, and that someone will catch something I missed. The menu is being developed at: http://ts.bisonman.com/dropdown_test.php And here's the code: Code: <style type="text/css">
body {
font-family: arial, helvetica, serif;
}
div.navbar {
width: 780px;
height: 20px;
background: #6699CC;
}
ul { /* all lists */
height:20;
padding: 0px;
margin: 0;
list-style: none;
white-space: nowrap;
}
li { /* all list items */
float: left;
position: relative;
width: 110px;
height: 20px;
background: #6699CC;
color: #FFFFFF;
text-decoration: none;
font-size: 15px;
font-weight: bold;
white-space: nowrap;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
width: 180px;
white-space: nowrap;
background: #FFFFFF;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
height: 20px;
}
li:hover a, li.over a { /* maintains block and border width */
display: block;
height: 20px;
white-space: nowrap;
}
li:hover ul a, li.over ul a { /* creates border around dropdown menus */
width: 180px;
height: 20px;
/* border-style: solid;
border-width: 1px;
border-color: #FFFFFF; */
white-space: nowrap;
}
#content {
clear: left;
}
a {
text-decoration: none;
color: #FFFFFF;
height: 20px;
}
a.under {
width: 160px;
height: 20px;
background: #6699CC;
color: #FFFFFF;
}
a:hover {
background: #FFFFFF;
color: #6699CC;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<!-- <div class="navbar"> -->
<table width=780 bgcolor=#6699CC border=0 height=20 cellpadding=0 cellspacing=0>
<tr>
<td valign=top width=20 NOWRAP height=20> </td>
<td valign=bottom NOWRAP height=20>
<ul id="nav">
<li><a href="/index.php?page=about">About</a>
<ul>
<li><a class="under" href="/index.php?page=faculty">Faculty</a></li>
<li><a class="under" href="/index.php?page=about&subject=history">History</a></li>
<li><a class="under" href="/index.php?page=about&subject=alumni">Alumni</a></li>
<li><a class="under" href="/index.php?page=about&subject=philosophy">Philosophy</a></li>
<li><a class="under" href="/index.php?page=about&subject=advisory_board">Advisory Board</a></li>
<li><a class="under" href="/index.php?page=about&subject=letter_from_terry">Message from Terry</a></li>
</ul>
</li>
<li><a href="/index.php?page=classes">Classes</a>
<ul>
<li><a class="under" href="/index.php?page=classes&subject=scenestudy">Ongoing Scene Study</a></li>
<li><a class="under" href="/index.php?page=classes&subject=beginning">Beginning Technique</a></li>
<li><a class="under" href="/index.php?page=classes&subject=on_camera_1">On Camera</a></li>
<li><a class="under" href="/index.php?page=classes&subject=body_dynamics">Body Dynamics</a></li>
<li><a class="under" href="/index.php?page=classes&subject=vocal_production">Vocal Production</a></li>
<li><a class="under" href="/index.php?page=classes&subject=specialty">Specialty Classes</a></li>
<li><a class="under" href="/index.php?page=classes&subject=conservatory">Conservatory/Intensive</a></li>
</ul>
</li>
<li><a href="/index.php?page=theater">Theater</a>
<ul>
<li><a class="under" href="/index.php?page=theater&subject=on_stage_now">On Stage Now</a></li>
<li><a class="under" href="/index.php?page=theater&subject=current_season">Current Season</a></li>
<li><a class="under" href="/index.php?page=theater&subject=past_seasons">Past Seasons</a></li>
<li><a class="under" href="/index.php?page=theater&subject=past_reviews">Past Reviews</a></li>
<li><a class="under" href="/index.php?page=theater&subject=auditions">Auditions</a></li>
<li><a class="under" href="/index.php?page=theater&subject=tickets">Tickets</a></li>
</ul>
</li>
<li><a href="/index.php?page=awards">Awards</a>
<ul>
<li><a class="under" href="/index.php?page=theater&subject=past_reviews">Reviews</a></li>
<li><a class="under" href="/index.php?page=awards&subject=mayors_award">Mayor's Award</a></li>
<li><a class="under" href="/index.php?page=awards&subject=gore_letter">Al Gore Letter</a></li>
<li><a class="under" href="/index.php?page=awards&subject=mekler_book">Terry in Mekler</a></li>
<li><a class="under" href="/index.php?page=awards&subject=50_best">50 Best</a></li>
</ul>
</li>
<li><a href="/index.php?page=events">Events</a>
<ul>
<li><a class="under" href="/index.php?page=events&subject=achievements">Achievement Awards</a></li>
<li><a class="under" href="/index.php?page=events&subject=celebrities">Celebrities</a></li>
<li><a class="under" href="/index.php?page=events&subject=conversations">"Conversations with..."</a></li>
</ul>
</li>
<li><a href="/index.php?page=membership">Members</a>
<ul>
<li><a class="under" href="/index.php?page=membership&subject=donate">Donations</a></li>
<li><a class="under" href="/index.php?page=membership&subject=subscriptions">Subscriptions</a></li>
<li><a class="under" href="/index.php?page=membership&subject=club_members">Club Members</a></li>
</ul>
</li>
<!-- <li><a href="/index.php?page=contact">Contact</a></li>
<li><a href="/index.php">Home</a></li> -->
</ul>
</td>
</tr>
</table>
<!-- </div> -->
</BODY>
</HTML>
Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Hi guys, pretty new to CSS layout, and recently created a site for my girlfriend. I used 960 grid system to handle my layout css, and it renders perfectly in safari/FF/IE7+... after I installed IE Tester, i realized that IE6 wasnt rendering properly. The menu and z-index stuff arent appearing correctly. If anyone can have a quick look and let me know where my code is causing issues it would be a great help. I'm not allowed to post the URL, as im a new user, but I guess I can send through PM if you want to have a look? Thanks a bunch. Greetings everyone! I've been working on the following page for a couple of days now, and it looks fine in Safari and Firefox, but all my CSS fail in IE. I don't know what the problem is. Feel free to view the page at the following url http://www.netunification.com/demo/ I spoke with a friend and he speculates IE is having problems with the float command. I'm not so sure of this because I used the same CSS techniques while building the following site (http://www.the904.com/demo/). The904 page renders perfectly in IE and I can't figure out what the difference is between the pages. I thought I used the same concept with both pages. I've been trouble shooting the problem for a couple of days now, but I haven't had any luck. Can please someone take a look at my net u page (http://www.netunification.com/demo/) and suggest a solution Thanks in advance for any/all assistance. Your time and effort is greatly appreciated! Walt Hello, I am using ASP.NET to create a web application. I HAVE to use a master page which means that I do not have complete control over the rendering. The trick is, the master page defines a menu at the top of the page. I need to create a table that dynamically fills the contents of the REMAINDER of the screen. If there is any overflow, I want to scroll the contents. Does anyone know how I can have the table fill the REMAINDER of the screen? I can nest DIVs and such once I have that outer table. Thank you! Crystal I have a onMouseOver event that draws a top border over text. This works fine with Mozilla/Firefox, but it doesn't render in IE. I think I know why -- it's because I used CSS to position the text beforehand, and in IE it doesn't bother drawing the top border because it's out of the text's bounding box, right? So, how do I fix this so it works in IE? I've posted a sample page with the problem he http://aaron.verge-rpg.com/vergebrd/test.html Any help would be appreciated. Hi, I have a problem with a menu i made: http://www.kbskameleon.nl/kameleon2/ In internet explorer the red dots apear and disapear... how can i fix this? Code:
body {
background: #EBEBEB;
behavior:url("csshover.htc");
}
#menu * {
font-family: Century Gothic, Arial, Helvetica, sans-serif ;
font-size:12px;
color:white;
}
/* the menu */
#menu ul,#menu li,#menu a {
display:block;
margin:0;
padding:0;
border:0;
}
#menu ul {
width:150px;
background:#5B3C66;
list-style:none;
}
#menu li {
position:relative;
padding:1px;
padding-left:10px;
background:url("menuicoon.gif") no-repeat;
z-index:9;
}
#menu li.folder { background:url("menuicoon.gif") no-repeat; }
#menu li.folder ul {
position:absolute;
left:120px; /* IE */
top:5px;
border:1px solid #9d9da1;
}
#menu li.folder>ul { left:140px; } /* others */
#menu a {
padding:2px;
border:0;
text-decoration:none;
color:white;
font-weight:normal;
width:100%; /* IE */
}
#menu li>a { width:auto; } /* others */
#menu li a.submenu {
}
/* regular hovers */
#menu a:hover {
border-color:gray;
background-color:#8F8FCB;
color:black;
}
#menu li.folder a:hover {
background-color:#8F8FCB;
}
/* hovers with specificity */
#menu li.folder:hover { z-index:10; }
#menu ul ul,#menu li:hover ul ul {
display:none;
}
#menu li:hover ul,#menu li:hover li:hover ul {
display:block;
}
If you look at my page here in IE and Firefox, you'll see that the footer is stretched in IE. It's barely showing the image, but flooding over into the center of the page. I have no idea why it'd be doing this. View in IE View in FF Here's the CSS used : Code: #footer {
background: #49515C url(img/header_right.gif) no-repeat 100%;
border-bottom: 5px solid #fff;
border-top: 10px solid #fff;
text-align: center;
color: #fff;
font-size: 0.8em;
padding: 10px;
line-height: 16px;
clear: both;
}
Can anyone see a problem? Hi there, I have the following in my css file: } #headerBannerWrapper { background-image: url(/GREENLOGO.jpg); background-position: bottom left; background-repeat: no-repeat; background-color: #DEF2B0; padding: 0px; margin: 0px; } #headerBannerWrapper img { padding: 0px; margin: 0px; vertical-align: bottom; However the banner doesn't get rendered in IE7. It renders OK in IE8 Any help most appreciated. The above is linked to the following class: .clearFix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; NB If the banner has content inside then it renders OK, however if there is no contents inside then the banner (green background) is not displayed. |
|||||||