|
CSS - Strange Margin Issue With A Nested List
Weird issue with FF ive noticed can anyone explain why this happens?
I have two divs, header and nav. Nav is inside header. Now when I placed a list inside nav it pushed my header div down abit maybe 15px. However when I added the following rule... Code: #nav ul{
margin-top:0px;
}
The error goes away. Strange isnt it? Heres my html and css Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="vwd_scripts/curvy/vwd_curvycorners.js"></script>
<script type="text/javascript">
<!--
gCurvyCorners[0]="nav,5,5,false,false,0,0";
//-->
</script>
</head>
<body>
<div id="header">
<div id="nav">
<ul>
<li>Home</li>
<li>Browse</li>
</ul>
</div>
</div>
<div id="content">
<h1 id="mainheader">Latest Templates</h1>
<h1 class="sideheader">List One Title</h1>
<h1 id="latesttemplates">Heres the latest templates</h1>
<ul class="sidebarlist">
<li>list one</li>
<li>list two</li>
<li>list three</li>
<li>list four</li>
<li>list five</li>
</ul>
<h1 class="sideheader" style="top:150px">List One Title</h1>
<ul class="sidebarlist" style="top:175px;">
<li>list one</li>
<li>list two</li>
<li>list three</li>
<li>list four</li>
<li>list five</li>
</ul>
<div id="templateholder" class="toprow" style="left:20px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:20px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template1name</td>
</tr>
<tr>
<td class="descrip">Added</td>
<td class="answer">template1date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template1type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template1images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="toprow" style="left:185px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:185px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template2name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template2date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template2type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template2images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="toprow" style="left:350px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:350px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template3name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template3date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template3type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template3images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="toprow" style="left:515px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:515px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template4name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template4date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template4type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template4images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:20px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:20px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template5name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template5date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template5type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template5images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:185px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:185px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template6name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template6date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template6type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template6images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:350px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:350px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template7name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template7date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template7type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template7images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:515px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:515px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template8name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template8date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template8type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template8images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Code: @charset "utf-8";
/* CSS Document */
body{
margin:0px;
}
#nav{
position:relative;
height:35px;
background-color:#3d3d66;
width:405px;
left:55%;
top:65px;
}
#nav li{
display:inline;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin-right:10px;
}
#nav ul{
margin-top:0px;
padding-top:8px;
}
#header{
height:100px;
background-color:#333333;
background-image: url(../images/jpegs/header.jpg);
background-repeat:repeat-x;
}
#content{
position:relative;
margin-top:50px;
margin-left:auto;
margin-right:auto;
height:500px;
width:974px
}
h1#mainheader{
margin-top:0px;
padding-bottom:2px;
border-bottom:dotted;
border-bottom-width:1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width:70%;
}
.sideheader{
position:absolute;
margin-top:9px;
top:0px;
left:75%;
padding-bottom:2px;
border-bottom:dotted;
border-bottom-width:1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width:25%;
}
h1#latesttemplates{
position:absolute;
margin-top:0px;
padding-top:50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
border-right:dotted;
border-right-width:1px;
width:72.7%;
height:105%;
top:0;
}
.sidebarlist{
position:absolute;
margin-top:9px;
top:25px;
left:695px;
}
.sidebarlist li{
list-style-image:none;
list-style-type:none;
}
#templateholder{
position:absolute;
height:105px;
width:140px;
border:solid 1px;
}
.toprow{
top:100px;
}
.bottomrow{
top:330px;
}
.descriptoprow{
top:215px;
}
.descripbtmrow{
top:445px;
}
#templatedescript{
position:absolute;
width:140px;
height:105px;
}
#templatedescript table{
width:140px;
}
.descrip{
text-align:left;
font-weight:bold;
font-size:12px;
}
.answer{
text-align:right;
font-size:12px;
}
.P{
color:#FF0000;
text-decoration:underline;
font:Arial, Helvetica, sans-serif;
font-size:12px;
border-right:1px solid;
border-right-color:#FF0000;
margin-left:12%;
padding-right:5px;
}
.D{
color:#FF0000;
text-decoration:underline;
font:Arial, Helvetica, sans-serif;
font-size:12px;
margin-left:5%
}
Similar TutorialsI've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? I have a strange css bug in IE 6 and 7 while making a simple two column structure. In firefox both the left and the right columns are top aligned properly but in IE the right column has around 15px of space on top of it. I can't seem to figure out why this space is coming. This seems like the IE peekaboo bug but can't be fixed using the line-height hack. Instead giving the IE proprietary ZOOM property to the UL we can fix this bug in IE. But I want to know is there any other method to fix this issue which uses valid css. Doctype for the HTML is xHTML transitional Here is the css code. #gdsrView{width:456px;} #gdsrView .srchGrpMod{} #gdsrView .grpResHdr{} #gdsrView .grpPagination{} #gdsrView .srCnt{clear:both;float:none;} #gdsrView .srCnt ul{list-style-type:none;margin:0;padding:0;} #gdsrView .srCnt ul#lstView li{clear:both;float:none;border-bottom:1px solid green;padding-bottom:5px;} #gdsrView .srCnt ul#lstView .grpPic{width:75px;height:75px;overflow:hidden;float:left;} #gdsrView .srCnt ul#lstView .grpInfo{background:#cacaca;margin-left:83px;} #gdsrView .srCnt ul#lstView dl.grpMLnk{font-size:1.1em;} #gdsrView .srCnt ul#lstView .grpInfo dl.grpMLnk dt{display:inline;} #gdsrView .srCnt ul#lstView .grpInfo dl.grpMLnk dt a.actLnk{font-size:0.8em;} #gdsrView .srCnt ul#lstView .grpInfo .grpDes{font-size:1em;} #gdsrView .srCnt ul#lstView .grpInfo .tStamp{font-size:0.9em;} #gdsrView .clearFl{margin-top:1px;} HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <head> <title>IE bug</title> </head> <body> <div id="gdsrView"> <div class="srchGrpMod"></div> <div class="grpResHdr"></div> <div class="grpPagination"></div> <!-- Begin: group results list view --> <div class="srCnt"> <ul id="lstView"> <li style="background:red;zoom:100%;"> <div class="grpPic"> <img src="../images/pic.jpg" alt="Group Image" width="75" height="75" /> </div> <div class="grpInfo"> <dl class="grpMLnk"> <dt><a href="#">Lorem Ipsum dolor amet consectectuer...</a></dt> <dt><a class="actLnk" href="#">Request Invitation</a></dt> </dl> <p class="grpDes">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec mattis urna eget magna. Nam cursus ipsum sit amet.lorem. Vestibulum ante ipsum primis in faucibus orci luc..</p> <p class="tStamp">Updated 55 Minutes ago</p> </div> <div class="clearFl"></div> </li> </ul> </div> <!-- End: group results list view --> </div> </body> Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site Test</title>
<link rel="stylesheet" type="text/css" href="redo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>
<body>
<div id="top_filler">
</div>
<div id="left_filler">
</div>
<div id="right_filler">
</div>
<div id="top_left">
</div>
<div id="header">
</div>
<div id="top_right">
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Etc, etc, etc....</p>
</div>
<div id="bottom_filler">
</div>
<div id="bottom_left">
</div>
<div id="bottom_right">
</div>
</body>
</html>
The CSS Code: * {
margin: 0;
padding: 0;
}
body {
background: #fdd9e9;
}
div#top_filler {
background: url(images/bg_slice_sm.png) repeat-x;
width: 100%;
height: 164px;
position: fixed;
top: 0px;
z-index: 5;
}
div#left_filler {
background: url(images/left_slice_sm.png) repeat-y;
width: 174px;
height: 100%;
position:fixed;
left:0px;
z-index: 5;
}
div#right_filler {
background: url(images/right_slice_sm.png) repeat-y;
width: 161px;
height: 100%;
position:fixed;
right: 0px;
z-index:5;
}
div#bottom_filler {
background: url(images/bottom_slice_sm.png) repeat-x;
width: 100%;
height: 76px;
position: fixed;
bottom: 0px;
z-index: 5;
}
div#header {
position: fixed;
top: 0px;
left: 37%;
height: 125px;
width: 316px;
margin: 0 auto;
background: url(pink_logo2.png) no-repeat;
z-index: 25;
}
ul.NoBulletNoIndent {
list-style-type: none;
margin-left: 0px;
padding-left: 0px
}
div#top_left {
height: 314px;
width: 221px;
background: url(images/left_top_corner_sm.png) no-repeat;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
}
div#bottom_left {
height: 175px;
width: 176px;
background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 5;
}
div#top_right{
height:174px;
width:174px;
background: url(images/right_top_corner_sm.png) top no-repeat;
position: fixed;
top:0px;
right: 0px;
z-index:5
}
div#bottom_right{
height: 602px;
width:198px;
background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 5
}
div#content {
margin: 40px 164px 0px 180px;
position: relative;
z-index: 1;
}
Well strange on IE 5.2 for mac (I am assuming others are ficked too) I have a div in which I want to put paragraphs in... Code:
<html>
<head>
<style type="text/css">
#midRight {
position:relative;
top:20px;
left:160px;
width:550px;
padding:0px;
margin:0px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="midRight">
<p>line1</p>
<p>line2</p>
<p>line3</p>
<p>line4</p>
<p>line5</p>
</div>
</body>
</html>
Everything works fine on firefox (as one would expect) but on IE the first paragraph displays fine (at the left edge of the DIV) but all the rest indent themselves to the right by 160px (or whatever I change the left:xx px; of the div to. This is bizzare! I cant work out why the first one would be fine but all the rest indented. Anybody know how I can fix this? (so IE looks like this) Code:
line 1
line2
line3
line4
line5
etc Hello there. I'm afraid I can't provide a live example because it's a complicated commission that hasn't yet been published, but I'll try to be as specific and detailed as possible. My overall aim: To have a squarish div on the left hand side and a few short rectangular divs vertically stacked on the right hand side of a container. The container is a div whose width is known. The stacked rectangles must have a minimum width but there is some margin for error. All these divs are separated by margins. Code: OOOO === OOOO OOOO === OOOO OOOO === There are other, unrelated blocks above and below this arrangement, and there are blocks nested within these divs as well, all unrelated though. So how did I implement this? I figured this was simple enough: Code: <div> ... <div class="left-square">...</div> <div class="right-short-rectangle">...</div> <div class="right-short-rectangle">...</div> <div class="right-short-rectangle">...</div> ... </div> And the CSS would then look something like this: Code:
.left-square {
width: 100px;
height: ...px;
float: left;
}
.right-short-rectangle {
margin-left: 110px;
margin-bottom: 5px;
height: ...px;
}
So, this works just fine in Firefox and Internet Explorer. However, for some reason, Chrome doesn't like it. What Chrome does is, it completely ignores the margin on the right-short-rectangles, placing them underneath the floating left-square, but giving them the correct width (the width of the container minus the margin). By fooling around with the DOM inspector, I discovered that if I remove the margin attribute from one of the rectangles, they show correctly (in Chrome). However, they obviously will break in Firefox and Internet Explorer if I do that. Also, if I remove the float attribute from the square, Chrome suddenly recognizes the margins of the rectangles properly (when it no longer matters). So, does anyone have any idea about what's going on here? EDIT: I just noticed this and it is certainly relevant: The right-short-rectangles contain a few *unstyled* divs and one div that is floated to the RIGHT (in other words, content I want to have on the right hand side of each of these rectangles). Without this inner, right-floated div, the margin issue no longer happens in Chrome. The inner div is, however, essential. What can I do? Use tables? 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 Hi I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript. here is the structure, Code:
<ul id="nav">
<li class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>
</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>
<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
<li class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>
here is my all related css, external css file, Code:
#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0 0; width:100%;}
/* All Levels */
#nav li { text-align:left; }
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}
/* 0 Level */
#nav li { clear:both; position:relative; display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left; padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }
#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}
#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }
#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }
/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }
/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }
/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }
#nav li ul { display:none; }
#nav li:hover ul{display: block; }
#nav ol { margin-left:5px; margin-bottom:10px; }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif); font-size:12px; font-weight:normal; }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }
inline css code to overwrite the default behavior for target page Code:
ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}
ul#nav ol li a { padding:0px; }
ul#nav ol li { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol { border:#ccc 1px solid; padding-bottom:30px; }
I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem. In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards. any help is much appreciated I am really stuck with this. hmmmm i want a nested list for a navigation menu, vertical on the left side all buttons aligned with 1px margin in between ok it almost works but i cant get rid of the extra list item that contains the nested list how does it not show itself I am not getting the right behaviour from my css in a nested list i made for a menu. here is the css for the menu Code:
#main_menu{
position: absolute; top: 252px; left:30px;
margin:0;
padding:0;
}
#menu_item_1{
list-style-type: none;
}
#menu_item_1 a{
color:#11352B;
text-decoration:none;
font-weight:300;
vertical-align:text-top;
}
#menu_item_1 a:hover{
color:#007888;
text-decoration:underline;
font-weight:300;
vertical-align:text-top;
}
#menu_item_2{
list-style-type: none;
}
#menu_item_2 a{
color:#007888;
text-decoration:none;
font-weight:300;
vertical-align:text-top;
}
and here is the xhtml section showing the menu Code: <ul id='main_menu'> <li id='menu_item_1'><a href='index.php'>Home</a></li> <li id='menu_item_1'><a href='about_us.php'>About Us</a></li> <li id='menu_item_1'><a href='customers.php'>Customers</a></li> <li id='menu_item_2'><a href='products.php'>Products</a></li> <ul> <li id='menu_item_1'><a href='atlas2000.php'>Atlas 2000</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Web Request</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Atlas Mailer</a></li> </ul> <li id='menu_item_1'><a href='service.php'>Service</a></li> <li id='menu_item_1'><a href='download.php'>Download</a></li> <li id='menu_item_1'><a href='support.php'>Support</a></li> <li id='menu_item_1'><a href='contact_us.php'>Contact Us</a></li> </ul> the main list works great but the sublist the color is wrong, it should behave like the main one does....I think I have not structured my css correctly, but can not figure it out. I have read more tutorials on list than I care to recall and still I am having difficulties getting this to work right. Here is the web page The top navigation bar has a link "Other regions". I want to have a drop down list of the other regions under it. I nested a list under the "Other regions" li. It is working - sort of but not correctly. The nested list is showing up under "home" and the are all on top of each other. Here is the html: Code: <div id="topbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about_us/about_us.html">About Us</a></li>
<li class="dropmenu"><a href="other_regions.html">Other Regions</a>
<ul>
<li><a href="#">Ireland</a></li>
<li><a href="#">Germany</a></li>
<li><a href="#">USA (North America)</a></li>
<li><a href="#">Latin America</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
</ul>
</div>
Here is the css: Code: #topbar {
height: 20px;
background-color: #3399FF;
border: 1px solid #000099;
padding-left: 10px;
margin-bottom: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
color: #FFFFFF;
background-color: transparent;
border: 1px solid #3399FF;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
#topbar a:hover, #topbar a:active {
color: #000099;
background-color: #DDEEFF;
border: 1px solid #000099;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
#topbar ul {
list-style: none;
margin: 1px 0px 1px 0px;
padding: 2px 0px 0px 0px;
}
#topbar li {
display: inline;
margin-right: 150px;
}
.dropmenu ul {
position: relative;
}
.dropmenu li {
position: absolute;
}
.dropmenu a:link, .dropmenu a:visited {
color: #000000;
background-color: transparent;
border: 1px solid #FF00FF;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.dropmenu a:hover, .dropmenu a:active {
color: #000099;
background-color: #DDEEFF;
border: 1px solid #000099;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.dropmenu li:hover ul { display: block; }
/*Main Section two columns under top section*/
#wrapper{
width: 100%;
min-height: 519px;
background: url(../images/bgcol.gif) repeat-y;
padding: 0px;
margin: 0px;
}
Help please if you go he http://www.tvshow-caps.co.uk/showPics.php?showid=24&season=6&episode=1 you will see that the nested list do not expand but OVERLAP in IE. firefox displays is ok. EDIT1: i have fixed the nested list problem (i was using height property which IE doesnt like) second problem: now IE doesnt apply the border-bottom property properly (use the above link) ok i would like to have on my nested list 1.1 and 1.2 instead of 1? ie Code: 1. hhh 1.1 jjj 1.2 kkk 2. kkk 2.1 kkkk etc but currently if i have the list-style-type as decimal the inner list comes out as just 1,2,3 etc... is it even possible to do this? http://img55. imageshack .us/img55/6775/cssexamplesy8.png ^ please remove the space before and image shack to view the image I've taken a screenshot of a problem I need help with, which is how IE and Firefox handle nested lists. Using code like this: Code:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
<li>item 3</li>
</ul>
Firefox displays the new list without being pushed down yet IE seems to create the space for where the list item would be and I can't figure out how to remove the space / how to get it to act like firefox. Removing the list item that holds the nested ul solves all problems but it isn't valid so I'm looking for another solution. Cheers I have the following list that I want displayed horizontally. I chose to do it with display:inline instead of float:left as that seemed to be the only way to get it to center on the page: http://www.jimandkris.com/listtest.html However, now I can't figure out how to get those submenus to align under their respective parent. Hopefully this is an easy one, any suggestions? Hi, I have an issue with two elements in a container that have a gap between them but I cannot see where the gap is coming from. Basically, I have a standard centered page layout, the relevant CSS for holding the elements (a banner and then a nav menu underneath) is: Code:
body {
margin: 0px;
padding: 0px;
text-align: center;
}
#container {
width: 1024px;
margin-left: auto;
margin-right: auto;
text-align: left;
background-color:#FFFFFF;
}
And the CSS for the elements is: Code:
#topbanner {
width:974px;
}
#menubar {
width:974px;
float:left;
}
The banner goes across the top of the page and the idea is that the menubar (which contains a number of images and their rollovers) fits directly underneath without any gap. But there seems to be white space of about 5px in all browsers and I can't see why. I tried adding a clearfloat into the HTML, i.e: Code:
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
But this doesn't do anything. HTML is currently: Code: <body> <div id="container"> <div class="topbanner"><img src="image/banner2.png" alt="banner" /></div> <div class="clearfloat"></div> <div class="menubar">(various button images)</div> <div class="clearfloat"></div> Any ideas as this has me stumped! I'm having a very bizarre redraw issue. I'm unable to provide the URL at this time, as a new user. However if you email me I'd be happy to provide it. To produce the bug I resize my browser window until I get a horizontal scroll bar. Then if I scroll right all my div backgrounds are not drawn. Only the background color for the body style fills the area. Anybody able to reproduce? If so any suggestions? Thanks! - John I have a page setup like this.... <table height="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr><td valign="top" class="lt_bar"><img src="template/blue_234/images/lt_shd.jpg" /></td> <td valign="top"></td> <td valign="top" class="rt_bar"><img src="template/blue_234/images/rt_shd.jpg" /></td> </tr> </table> and: .lt_bar { width: 27px; background-image: url("images/lt_shd.jpg"); background-repeat: repeat-y; float: left } .rt_bar { width: 27px; background-image: url("images/rt_shd.jpg"); background-repeat: repeat-y; float: right; } In IE all is fine, in FireFox the right side shows, the left side does not. any clues... Greetings, The following webpage works in firefox but not in ie: http://resonantprogramming.com/homen.html For some reason the menu does not show up correctly. I want the menu to show up within the top gradient graphic, but ie doesn't like that for some reason. I did alter the z-index value to no avail. Any ideas? Thanks I've got an "IE" issue! This CSS code looks perfect in IE7 and Firefox. It is a photo box that offsets 225 pixels to the left of the text box. Code: #inside_offset_image {
width: 319px;
float: left;
margin-left: -225px;
margin-right: 30px;
margin-bottom: 30px;
}
But when I test in IE5.5 and IE6, this photo box runs almost completely off the left side of the browser. The actual test page is located he http://penncomm.com/bean/inside.html Any ideas? |
|||||||