|
CSS - Ie6 Margin Collapse Issues? Extra Spacing Added. :/
On my new design: http://codymays.net/~private_ftp/theed
The header and footer of the green block have a space on them and I cannot figure out why. I had this problem with the design before, but I started over and now I only have this issue with IE6 and below. It works in all other browsers. I can clear the spaces if I set the margin-top of the block's content area to -4 and the footer's margin-top to -4. But once this is done, IE then redraws the div at the bottom of the page for no apparent reason. Any ideas/suggestions on what to do here would be appreciated. Thanks, Cody Similar TutorialsHi there guys, This is a pretty specific problem to my website, but I can't seem to find out why part of my navigation list moves down when an element is shown by Javascript in IE. So I can't plug in a url into this post, so I suppose I'll just explain the problem. I have a list navigation with images, and within one of the list elements is another nested list. When I click on the link that then uses JS to display the subnavigation, the link below that shifts down something like four pixels when its not supposed to, and I couldn't fix it by playing with CSS for some reason, but I'm assuming the problem is hidden in there somewhere. I've been trying to resolve this for a couple days; if anyone could help me out, I'd really appreciate it! Hi there, someone please help me... i am pulling my hair out! hahah so i am trying to custom code an email template for use in mailchimp - however it looks okay in design preview in dreamweaver but when i preview in firefox or take it into mailchimp there are extra spaces above and below the images not specified in the code. Please help../. urgent job! [CODE] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "...."> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Sample Email Template From MailChimp</title> <style type="text/css" media="screen"> /** * @tab Page * @section background color * @tip Choose a color for your HTML email's background. You might choose one to match your company's branding. * @theme page */ body { /*@editable*/ background-color: #ffe4a8; text-align:center; } /** * @tab Page * @section border * @tip Add a border to help your template content stand out from your email's background. */ #layout { /*@editable*/ border: 0px solid #999999; /*@editable*/ background:#ffffff; text-align:left; height: auto; width: 780px; } /** * @tab Header * @section header bar * @tip Choose a set of colors that look good with the colors of your logo image or text header. */ #header { /*@editable*/ background-color: #FFE4A8; /*@editable*/ border-top: 0px none #333333; /*@editable*/ border-bottom: 0px none #ffffff; /*@editable*/ padding: 0px; /*@editable*/ color: #333333; /*@editable*/ font-size: 30px; /*@editable*/ font-family: Georgia; /*@editable*/ font-weight: normal; /*@editable*/ text-align: left; margin: 0px; height: 156px; width: 780px; } /** * @tab Body * @section default text * @tip This is the default text style for the body of your email. * @theme content */ #content { /*@editable*/ font-size: 13px; /*@editable*/ color: #333333; /*@editable*/ font-style: normal; /*@editable*/ font-weight: normal; /*@editable*/ font-family: Helvetica; /*@editable*/ line-height: 1.25em; text-align: justify; padding-right: 30px; padding-bottom: 10px; padding-left: 30px; } /** * @tab Body * @section title style * @tip Titles and headlines in your message body. Make them big and easy to read. * @theme title */ .primary-heading { /*@editable*/ font-size: 28px; /*@editable*/ font-weight: bold; /*@editable*/ color: #532e2a; /*@editable*/ font-family: Georgia; /*@editable*/ line-height: 150%; /*@editable*/ margin: 25px 0 0 0; } /** * @tab Body * @section subtitle style * @tip This is the byline text that appears immediately underneath your titles/headlines. * @theme subtitle */ .secondary-heading { /*@editable*/ font-size: 20px; /*@editable*/ font-weight: bold; /*@editable*/ color: #000000; /*@editable*/ font-style: normal; /*@editable*/ font-family: Georgia; /*@editable*/ margin: 25px 0 5px 0; text-align: justify; } /** * @tab Footer * @section footer * @tip You might give your footer a light background color and separate it with a top border * @theme footer */ #footer { /*@editable*/ background-color: #FFE4A8; /*@editable*/ border-top: 0px none #ffffff; /*@editable*/ padding: 0px; /*@editable*/ font-size: 10px; /*@editable*/ color: #333333; /*@editable*/ line-height: 100%; /*@editable*/ font-family: Verdana; } /** * @tab Footer * @section link style * @tip Specify a color for your footer hyperlinks. * @theme link_footer */ #footer a { /*@editable*/ text-decoration: underline; /*@editable*/ font-weight: normal; } /** * @tab Page * @section link style * @tip Specify a color for all the hyperlinks in your email. * @theme link */ a, a:link, a:visited { /*@editable*/ color: #800000; /*@editable*/ text-decoration: underline; /*@editable*/ font-weight: normal; } a:link { color: #EE770F; } a:visited { color: #C91C00; } a:active { color: #EE770F; } </style> </head> <body> <center> <table id="layout"mc:edit="layout" border="0" cellspacing="0" cellpadding="0" width="780"> <tr> <td id="header" mc:edit="header" width="780" height="156"> <!-- NOTE: This image would trigger the display of a placeholder block with edit links when shown in the MailChimp editor interface --> <img src="...." alt="" width="780" height="129" /> <img src="...." alt="" width="524" height="27" /><img src="...." alt="" width="86" height="27" /><img src="...." alt="" width="101" height="27" /><img src="...." alt="" width="69" height="27" /> </td> </tr> <tr> <td id="content" mc:edit="content"> <h1 class="primary-heading">Primary Heading</h1> <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p> <h2 class="secondary-heading">Secondary Heading</h2> <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.<br /> </p> </td> </tr> <tr> <td id="footer" mc:edit="footer"> <p align="center"> <img src="...." alt="" width="780" height="28" /> <a href="*|ARCHIVE|*" class="adminText"><br /> <br /> view email in browser</a> | <a href="*|UNSUB|*">Unsubscribe</a> *|EMAIL|* | <a href="*|UPDATE_PROFILE|*">Update your profile</a> | <a href="*|FORWARD|*">Forward to a friend </a></p> <p align="center">Copyright (C) 2009 *|LIST:COMPANY|* All rights reserved.<br /> </p> </td> </tr> </table></center> </body> </html> [CODE] conception is offline Reply With Quote Hi, Can anyone please explain why the more text I add to the main content area 'full-size' div.... the more spacing gets added below it. Is there a way to stop this? example herel Code:
/*begin normal CSS
----------------------------------------------------*/
body {
text-align: center;
background: #362f25;
color: #333;
font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#wrap {
margin: 0 auto;
width: 960px;
text-align: left;
background: #f8f4f2 url(images/bg-wrap.gif) repeat-y 0px 0px;
padding-bottom: 5px;
}
/*classes
----------------------------------------------------*/
.full-size {
margin-left:20px;
margin-top:20px;
width: 700px;
font: 12px;
position:relative;
left:180px;
top:-370px;
}
/*header
----------------------------------------------------*/
#header {
height: 50px;
background: #362f25;
color: #d2cccb;
font: 15px "Palatino Linotype", Arial, Helvetica, sans-serif;
}
/* left nav menu
----------------------------------------------------*/
#navcontainer
{
width: 170px;
border-right: 1px solid #000;
padding: 0 0 0 0;
margin-bottom: 10px;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
position:relative;
left:0px;
top:-30px;
}
#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navcontainer li
{
border-bottom: 1px solid #90bade;
margin: 0;
}
#navcontainer li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 15px solid #006865;
border-right: 10px solid #203654;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #navcontainer li a { width: auto; }
#navcontainer li a:hover
{
border-left: 15px solid #203654;
border-right: 10px solid #006865;
background-color: #2586d7;
color: #fff;
}
Hello, first post here... I have an image floated left, with an unordered list (ul) next to it. Problem is, the margin values I set for the list are totally ignored, so the list bullets end up overlapping the image. Seems the only solution is to set margins on the image, but that also pushes away non-overlapping content, like the h3 that is above the list and positioned fine. Any ideas? Everything works fine if/when I float the list left, but that seems draconian... Code: css Code: Original - css Code img.alignleft { margin-right:0.5em; display:inline; float:left; } ul, ol, dl { line-height:1.5em; margin:0 0 1em 1em; }
HTML4Strict Code: Original - HTML4Strict Code <p><img src="" width="295" height="400" class="alignleft"/></p> <h3>A Sampling of Workshops We Have Brought to Nonprofits</h3> <ul> <li>An Introduction to Social Media for the Nonprofit</li> <li>An Introduction to Storytelling for the Nonprofit</li> <li>Using Social Media and Digital Storytelling in the Classroom</li> </ul> <p><img src="" width="295" height="400" class="alignleft"/></p> I am setting up a site that has an inner white content area surrounded by an outer grey area. Both areas have rounded corners. I use a bg image (single image for both corners) with a no repeat to handle the corners on the top. I want the same amount of padding all the way around the white box. So I have a div with the white content area inside the div for the grey box and gave the grey box a padding of 7px. This displays fine in IE (oddly enough), but doesn't display correctly in Firefox or Safari. What it is doing in those 2 browsers is adding extra space on the top and the bottom, so the grey area is about 12px taller than it should on either side. Where is this extra space coming from? How can I fix this? I have attached an image showing the issue and the code used is below. So here's the css: Code: body{
padding:0px;
margin:0px;
background:#535353;
}
.nav_container{
width:770px;
height:76px;
background-color:#FFF;
}
.page_body{
background:url(images/page_top_curve.gif) top left no-repeat #e1e1e1;
width:756px;
padding:7px;
}
.content_container{
background:url(images/content_full_top_curve.gif) top left no-repeat #fff;
width:756px;
}
and here's the HTML: 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=ISO-8859-1" /> <title>Title</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <!--MAIN NAVIGATION--> <div class="nav_container">hgjgjhg </div> <!--PAGE BODY--> <div class="page_body"> <div class="content_container"> <p>dsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd</p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </body> </html> I know it has to be a padding or margin issue, but I cannot figure out where it is coming from. I have spent several days going back to this and trying to look at it with fresh eyes with no luck. I am sure it will be a 'duh' type of thing when I get a solution. Here is the webpage: http://www.palmettobaydesigns.com/new/layout.html I am getting extra space of about 10px it looks like between the white rounded top image that makes the top of my box and the div below it called .box - in ff4. In IE 8 I am getting about 1px space below the box. Thanks in advance! Hi all Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
</head>
<body>
<table style="margin-bottom: 10px;" cellspacing="0" cellpadding="0">
<tr>
<td>asdf</td>
</tr>
</table>
<p style="margin-top: 10px;">asdf</p>
</body>
</html>
Why do the margin-bottom of the table and the margin-top of the p not collapse (only tested in Firefox2)? Why is there 20px between them? I don't understand the world of margins anymore... Is this an exception or a bug or what? Thanks for help, Josh Um... OK so I wrote a post asking if anybody knew why something was displaying incorrectly on my site, but due to forum rules I wasn't allowed to include any links. So how can I show you the problem if I can't show you? Also, the link saying "see forum rules for more information" didn't have any more information. Like, how many posts until I can ask for help and actually show what the problem is? At this URL (http://digitalspline.com/projects/gameCitadel/) You will see the lower content area in IE looks like it is right aligned, in firefox it is exactly where I want it. There is a left margin set on the two first blocks, upper left and upper right of 30pt. Code: body {
background-color: #a0a0a0;
background-image: url(images/index/pageBackground.gif);
background-position: top;
background-repeat: repeat-x;
margin-top: 17px;
color: #FFFFFF;
}
a:hover {
color: #FFFF00;
}
#wrapper {
background-color: #323333;
color: #FFFFFF;
width: 779px;
}
#topHeader {
background-color: #323333;
background-image: url(images/index/headerBG.gif);
color: #FFFFFF;
width: 779px;
height: 88px;
text-align: right;
vertical-align: middle;
font: 8pt Verdana, Arial, Helvetica, sans-serif;
}
#login {
text-align: right;
color: #FFFFFF;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
}
.loginBox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color: #000000;
background-color: #FFFFEE;
width: 100px;
border: 1px solid #000000;
}
#mainContent {
background-color: #323333;
background-image: url(images/index/contentBG.gif);
width: 779px;
height: 700px;
overflow: auto;
margin-top: 7px;
}
#leftMenuTop {
background-color: #323333;
background-image: url(images/index/menuTop.gif);
background-repeat: no-repeat;
background-position: right;
width: 148px;
height: 179px;
float: left;
padding-left: 13px;
}
#leftMenuTopText {
width: 122px;
height: 148px;
float: right;
margin-top: 15px;
font: 9px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.menuText{
padding-top: 4px;
}
.menuLinkText{
color: #702706;
text-decoration: none;
}
#leftMenuBot {
background-color: #323333;
background-image: url(images/index/menuBot.gif);
background-repeat: no-repeat;
background-position: right;
width: 148px;
height: 389px;
float: left;
padding-left: 13px;
margin-top: -80px;
}
#bannerBoxTop {
background-color: #323333;
background-image: url(images/index/bannerBG.gif);
background-repeat:no-repeat;
width: 492px;
height: 69px;
float: left;
margin-left: 62px;
}
#bannerTop {
background-color: transparent;
width: 468px;
height: 60px;
float: right;
margin-top: 4px;
padding-right: 13px;
}
#featuredArt {
background-color: #000000;
width: 571px;
height: 179px;
float: left;
margin-left: 22px;
margin-top: 20px;
}
#featureBoxTop {
background-image: url(images/index/featureBoxTop.gif);
background-repeat:no-repeat;
height: 15px;
font: 9px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: left;
text-indent: 7px;
padding-top: 2px;
}
#featureContent{
height: 148px;
}
#featureBoxBot {
background-image: url(images/index/featureBoxBot.gif);
background-repeat:no-repeat;
height: 15px;
font: 9px Verdana, Arial, Helvetica, sans-serif
}
#newestBlock{
width: 571px;
height: 400px;
float: left;
margin-top: 7px;
margin-left: 22px;
}
#box1 {
width: 150px;
background-color: #000000;
float: left;
margin-top: 13px;
margin-left: 30pt;
}
#box2 {
width: 150px;
background-color: #000000;
float: left;
margin-top: 13px;
margin-left: 15pt;
}
#box3 {
width: 150px;
background-color: #000000;
float: left;
margin-top: 13px;
margin-left: 15pt;
}
#box4 {
width: 150px;
background-color: #000000;
float: left;
margin-top: 15px;
margin-left: 30pt;
}
#box5 {
width: 150px;
background-color: #000000;
float: left;
margin-top: 15px;
margin-left: 15pt;
}
#box6 {
height: 180px;
width: 150px;
background-color: #000000;
float: left;
margin-top: 15px;
margin-left: 15pt;
}
.head150 {
background-image: url(images/index/150header.gif);
background-repeat: no-repeat;
font: 9px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
height: 16;
text-align: left;
line-height: 16px;
text-indent: 5px;
}
.foot150 {
background-image: url(images/index/150footer.gif);
background-repeat: no-repeat;
font: 9px Verdana, Arial, Helvetica, sans-serif;
height: 15px;
}
.mid150 {
font: 9px Verdana, Arial, Helvetica, sans-serif;
height: 149px;
text-align: left;
}
#footer {
background-color: #323333;
background-image: url(images/index/footer.gif);
background-repeat: no-repeat;
width: 779px;
height: 99px;
}
I keep forgetting to write these little fixes down, but this is a good time to start. As usual I've come to a crossroad I cannot seem to get passed. In IE6 my layout looks fine, all but a little extra space at the top of my center div in a three column layout. Ive tried all variations of padding: 0px and margin: 0px in both the center div and its containing div. If someone could kindly point the error to me, I promise to write it down this time .. and never ask again ;0) Site: http://www.ioforge.com/development/ CSS: http://www.ioforge.com/development/includes/style.css Hi all, Really strange problem with IE (as usual). I've done an English site with a typical left and main content structure, as you can see on: http://www.ntcjapan.com/index2.php The English site is left-aligned, and works fine. Now I'm doing an Arabic version and the site needs to be center aligned. Keeping things really simple, please see the following site: http://ntcjapan.com/languages/arabic/english.html The HTML: Code: <div id="container"> <div id="left"> <!-- NAVIGATION --> test right section </div> <div id="main"> test main section </div> <div class="spacer_small"> </div> </div> The CSS: Code:
#container {
margin: 0 auto;
text-align: left;
width: 764px;
background: url(../images/0_bg_center.gif) repeat-y;
min-height: 100%;
height: auto;
}
#main {
width: 590px;
padding-top: 115px;
padding-left: 9px;
background: url(../../../images/0_logo.gif) no-repeat;
float: left;
margin: 0px 0px 0px 1px;
}
/* Hack for IE, Reset to 100% height */
* html #container {
height: 100%;
}
/* End IE Hack */
#left {
width: 158px;
float: right;
}
Ok, you can ignore the height stuff because that works on the original English site. The problem is the width/margin on IE. The "left" section is actually now floating right, and is meant to be the navigation. The "container" section is 100% height and provides those background orange and grey vertical lines which I need. The "main" section has a margin-left of 1px, because I want it to be right next to the first orange line. On FIREFOX, this looks fine, you can see the background NTC logo actually touching the orange left line, hence we know it is using the margin-left: 1px correct. IE however, seems to add a bit of space and it looks as if I specified a margin-left: 2px for IE! Basically, in IE, the logo never 'touches' the orange line. This causes lots of problems when inserting content and trying to fit the exact width of the container, since IE seems to use one extra pixel than Firefox,and overflows if I try to use the exact width (764px) of the container. A demonstration of the problem on IE: http://ntcjapan.com/languages/arabic/ieprob.gif Any help, please?? Hello all, firstly, thank you for all you contribute to this question. I have a website (as everyone does) which has a problem (which i always do). I have an embeded flash file and 2 lines of text which are seperated into 2 different divs inside a table cell. I am using css to position these texts over the flash file, which is just fine. The only problem I am recieving is that while using the position: relative in css for these it leaves extra unneeded space under the flash file where the text would be if they were not being positioned. Here is the page wit hthe problem: Look at the header So I am stumped. I have posted away in other CSS forums and have received no replies at all, I have googled it many times and found the same problem, but the solution will only work for that individuals situation. So, what can be done. Here is my html for the header cell: Code: <table id=main cellpadding=0 cellspacing=0> <tr> <td class=head colspan=2 height=144px> <param name="movie" value="test.swf"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <embed src='images/test.swf' width=762px height=144px wmode="transparent" style="z-index: 1;" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed><div class='headtitle'><? echo $title; ?></div><div class='headquote'><? echo $quote; ?></div></td> </tr> And here is the css that is used by that cell: Code:
table#main {
height : 100%;
background : #ffffff;
width : 762px;
border : 0 none inherit;
border-left : 1px solid #000;
border-right : 1px solid #000;
border-top : 0 none inherit;
border-bottom : 0 none inherit;
margin : 0;
padding : 0;
}
table#main td.head {
height : 0px;
width : 762px;
background : #006699;
border : 0 none inherit;
border-bottom : 2px solid #000;
vertical-align : top;
padding : 0;
background-image: url(images/logo2.jpg);
}
table#main td.head div.flash {
position: relative;
z-index:1;
}
table#main td.head div.headtitle {
z-index:2;
font-size : 24pt;
color : #fff;
position : relative;
font-weight : bold;
left : 5px;
top : -45px;
}
table#main td.head div.headquote {
z-index:2;
font-size : 10pt;
font-weight : bold;
color : #fff;
position : relative;
text-align : right;
right : 5px;
top : -180px;
font-style: italic;
}
Im sure its something Im looking over as I am a newb at css. Thanks for all help! A margin-top:10px is the equivalent of margin-top:11px on IE8 (compatibility mode). I actually took a screenshot and counted the number of pixels in Photoshop. This gives me a hell load of frustration because I want to align my comment form's submit button with the bottom of my textarea. For an example look at this (http://www.deliciousdays.com/archives/2009/10/07/stuffed-but-happy/#comments) scroll all the way down. I dunno how deliciousdays did it but they managed to get the button aligned with the textarea in both Firefox and IE. Anybody can help? Hi, I have a margin or spacing between the header image and the navigation bar. I'm unsure of how to remove it. I want the navigation to be directly underneath the header. This is the HTML Code: <div id="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="horses.html">Horses</a> <ul> <li><a href="stallions.html">Stallions</a></li> <li><a href="mares.html">Mares</a></li> <li><a href="geldings.html">Geldings</a></li> <li><a href="foals.html">Foals</a></li> </ul> </li> <li><a href="showteam.html">Show Team</a></li> <li><a href="showresults.html">Show Results</a></li> <li><a href="youths.html">Youths</a></li> <li><a href="sales.html">Sales</a></li> <li><a href="contactus.html">Contact Us</a></li> </ul> </div> This is the CSS Code:
#header {
background:#ddd;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
border-top:1px solid #FFF;
}
#navbar {
font-family: Edwardian Script ITC, Verdana, Arial, sans-serif;
font-size:36px;
width:100%;
margin-top:0px;
padding:0px;
height:63px;
background-color:#FFF;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 7px 8px;
background-color: white;
color: black;
text-decoration: none;
}
#navbar li ul {
display: none;
width: 5em; /* Width to help Opera out */
background-color: white;
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: white;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color:#FFC; }
Any help would be appreciated! It's really frustrating me. I've tried looking around other websites for help too. Kim For the first time, rather than coding my own layout CSS, I'm adapting a layout and CSS created by someone else... and I've run into some problems figuring out a couple of things. The layout in question is one written for Movable Type, and is freely able to be edited and changed. I'm working with the layout in a test setting now, before moving it to its permanent home. You can see it in action at: Code: http://www.outincenterfield.com/mt/ Two things I need to figure out: 1. How to align the whole layout in the center of the page. (the header image, the 3-columns, and the footer) 2. How to increase space(margin) between the boxes in the sidebars, so that the underlying white background color shows through. Any help would be GREATLY appreciated - as the way this layout is coded has got me turned all around. I've tried everything I could think of, and can't sort out how to do these two things. Here's the main CSS: Code: /*
THEME NAME: Diurnal
THEME URI: http://ntuat.wordpress.com/
DESCRIPTION: This flexible 5-in-1 theme changes according to the time of day
VERSION: 1.0
AUTHOR: Carolyn Smith
AUTHOR URI: http://not-that-ugly.co.uk/
TEMPLATE: sandbox
*/
/* use any structure in /sandbox-layouts; more details in the readme*/
/* included here for Movable Type */
/* links to time-specific stylesheets */
@import url('sunrise/style.css');
@import url('morning/style.css');
@import url('afternoon/style.css');
@import url('sunset/style.css');
@import url('night/style.css');
div#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
div#content {
margin: 0 400px 0 0;
}
div.sidebar {
float: left;
overflow: hidden;
width: 180px;
}
div#primary {
margin: 0 0 0 -400px;
}
div#secondary {
margin: 0 0 0 -200px;
}
div#footer {
clear: left;
width: 1000px
}
body {font: 0.75em arial, helvetica, verdana, sans-serif;
margin:0;
padding:0;
color:#444}
#container {background:#fff;}
#content {
padding:0 10px 0 10px}
/* header */
#header {height:200px;}
#header h1 {font:3em 'century gothic', futura, serif;
margin:0;
padding: 0 10px 0 10px;}
#blog-description {padding:7px 10px 0px 10px;
color:#fff}
.skip-link {display:none}
/* prev/next links */
.navigation {margin:1em;
text-align:center;
width:95%;
height:1em}
.nav-previous {float:left;
text-align:left;
width:45%}
.nav-next {float:right;
text-align:right;
width:45%}
.nav-previous a {padding-left:20px;
background:url(leftarrow.gif) center left no-repeat;}
.nav-next a {padding-right:20px;
background:url(rightarrow.gif) center right no-repeat;}
span.meta-nav {display:none}
/* page navigation */
#menu ul li {
margin:0;
padding:0;
display:inline;
font:1.2em 'century gothic', futura, sans-serif;
}
#menu ul li ul {margin:0;
display:inline;
font-size:0.8em;
}
#menu ul li a {
padding: 3px 20px 3px 10px;
letter-spacing:0.05em;
}
/* sidebar stuff */
.sidebar {margin:0;
padding: 10px;
background:#fff}
.sidebar h3, .comments h3, #respond h3 {letter-spacing:0.05em;
margin:0;
padding:7px 10px 3px 20px;
font: 1.4em 'century gothic', futura, sans-serif}
#menu ul, .sidebar ul {list-style:none;
margin:0;
padding:0;}
.widget, .sidebar li.linkcat {border:1px #ccc solid;
margin-bottom:2em;}
.sidebar ul li, #wp-calendar caption {background:#f0f0f0 url(greybk.png) top left repeat-x;
border:1px #ccc solid;}
.sidebar h3 {border:1px #ccc solid;}
.sidebar ul li ul li, .sidebar ul li div {background:#fbfbfb;
border:0;
padding:3px 10px 3px 10px;}
.sidebar ul li ul li ul li {
padding-left:20px;
background:url(rightarrow.gif) center left no-repeat;}
/* posts & comments */
.post, body.page div.hentry, .comment, .trackback, .pingback {border:1px #ccc solid;
margin:10px 0 10px 0}
.entry-title, .comment-author {letter-spacing:0.05em;
margin: 0;
background:#f0f0f0 url(greybk.png) top left repeat-x;
padding:5px 10px 0px 10px;
font: 2em 'century gothic', futura, sans-serif}
abbr.published {border:0;}
.entry-date, .comment-meta, #trackbacks-list div.comment-author {
text-transform:uppercase;
font-size:0.9em;
margin:0;
background:#f0f0f0;
padding:0px 10px 5px 10px;}
.entry-date {background:#f0f0f0 url(clock.gif) top left no-repeat;
padding-left:20px}
#trackbacks-list div.comment-author {font-family: arial, helvetica, verdana, sans-serif;
border-bottom:1px #ccc solid;
letter-spacing:0em;
padding-top:5px}
.comment-meta {border-bottom:1px #ccc solid;}
.comment p, #trackbacks-list p {padding:0px 10px 0px 10px;
background:#fbfbfb;}
.entry-content {line-height:1.4em;
padding:10px;
background:#fbfbfb;
border-top:1px #ccc solid;
}
.entry-meta{
clear:both;
background:#f0f0f0;
border-top:1px #ccc solid;
padding:5px 10px 5px 10px}
.meta-sep {padding-left:18px;
color:#f0f0f0;}
li.bypostauthor div.comment-author {background:#f0f0f0 url(starbk.png) top left repeat-x}
/* forms */
input, textarea {background:#f0f0f0 url(greybk.png) top left repeat-x;
border:1px #ccc solid;
color:#444;
font:1em arial, helvetica, verdana, sans-serif;
overflow:auto}
#commentform #submit {margin:10px 0 10px 0;
color:#333}
#searchform div{background:#f0f0f0;
margin:10px}
#searchform submit {color:#333}
/* calendar */
#calendar h3 {display:none}
div#calendar_wrap {padding:0;
background:#f0f0f0 url(greybk.png) top left repeat-x;}
#wp-calendar {width:100%;
background:#fbfbfb;}
#wp-calendar caption {font:1.4em 'century gothic', futura, sans-serif;
margin:0;
padding: 5px 0px 5px 20px;
text-align:left
}
#wp-calendar td {text-align:center;
border:#ccc 1px solid;
background:#f0f0f0 url(greybk.png) repeat-x;}
#wp-calendar tfoot td {
background:#fbfbfb;
border:0;
}
#wp-calendar td.pad {border:0;
background:#fbfbfb}
td#today {
background:#ccc;
border:#999 1px solid}
/* image handling */
#content img {max-width:98%;}
#content, .sidebar {overflow:hidden}
a img {border:0}
.alignright {
float:right;
margin:5px}
.alignleft {
float:left;
margin:5px}
.center {
margin:auto;
display:block;
}
/* getting asides to LOOK like asides */
body.home div.category-asides {
margin:20px 0px 20px 0px;
padding:5px 10px 5px 10px}
body.home div.category-asides *{
display:inline;
}
body.home div.category-asides .entry-content {border:0;
font-size:1em;
line-height:1.5em;
padding:0}
body.home div.category-asides div.entry-meta {background:#fbfbfb;
margin:0;
border:0
}
body.home div.category-asides .entry-title,
body.home div.category-asides .entry-date,
body.home div.category-asides .author,
body.home div.category-asides .meta-sep,
body.home div.category-asides .cat-links
{display:none}
/* html elements */
a {text-decoration:none}
blockquote {border:1px #ccc solid;
padding:5px}
h2 {font: 2em 'century gothic', futura, sans-serif;
margin:10px 0 -10px 0;
}
.hentry ul {list-style-image:url(rightarrow.gif)}
#footer {
background:#f0f0f0 url(greybk.png) repeat-x;
text-align:center;
border-top:#ccc 1px solid;
padding:10px 0 10px 0;
}
In both Firefox and IE some of the larger advertisements at the top overlap the content. In IE only, the margin on the bottom of the page does not show up at all. The website is http://www.socialplay.com. Please provide help if you know what's wrong. Thanks. as is common with divs is the auto return at the bottom of them... i have this CSS page... http://defunctgames.com/helpfix/page1.htm the only problem with it is the space underneath "All Websites: Reviewed!" here is the original HTML version of this section.. http://defunctgames.com/helpfix/page2.htm can you please help me get the same exact result as the HTML version thanks. Hey, I've been slowly trying to learn CSS and was very pleased with myself for making this website with Divs. But now IE7 just gave me the finger. I have some major major spacing issues with my #maincontentLeft and #maincontentRight divs. I have read a little bit about all the crazy stupid bugs in IE6 and IE7 (like double spacing margins..ect) but don't really know hwo to fix... or if thats my problem. ??? Here is my site u rl: ptk.org/scholarships/franklanza/ (i'm new so i can't link it in the text field but just add the w's ) Any help would be SO much appreciated!! -Sarah |
|||||||