|
CSS - Css Help Needed. Somehow Padding/margin /extra Spaces Added And Don't Know How?
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 Similar TutorialsI 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> 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 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;
}
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 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! I'm not sure what is causing the extra spaces to the top and bottom area of the images... Code:
<div style="margin:0px;padding:0px;background-color: #FF0000;">
<img src="images/mod_bt2.gif"><br>
<img src="images/mod_bt1.gif"><br>
<img src="images/mod_bt7.gif"><br>
<img src="images/mod_bt6.gif">
</div>
Hello folks, I have this page Code: (chep-net.com/main_nav) and on the left side of the table cell it always renders a small space. I tried cellpadding 0. Did I miss something? I'm having some troubles getting my div to appear correctly. WHat I want is for the div to be completely contained by a FLASH movie with no whitespace. In Firefox I'm getting an approximately 5px tall white bar at the top. TWH is the url, the flash movie only appears on the main page. My container div uses a background image with a greenish colored 200px left edge, and then a white edge to fill the rest. I know this is what's coming through, but what baffles me is that even when specifying a background color for my div it's not coming through. Here is some of the code: CSS: Code:
#container {
width: 760px;
height: auto;
margin: 0 auto;
text-align: center;
overflow: auto;
background: url('../images/style/container_back.jpg') repeat-y;
border-bottom: 20px solid #6e868f;
}
#lcol {
width: 200px;
height: 380px;
float: left;
text-align: left;
}
#nav {
height: auto;
background-color: #000000;
width: 100%;
text-align: center;
}
#nav ul
{
list-style: none;
padding: 20px 0px;
margin: 0px;
}
#nav ul li
{
padding: 7px;
}
#info {
height: auto;
width: 190px;
text-align: center;
padding: 5px;
font-size: 11px;
}
#flashcontent
{
width: 560px;
height: 380px;
padding: 0;
margin: 0;
float: right;
}
HTML -- I've taken the content out so that the structure is more clear. Code:
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="quote"></div>
</div>
<div id="lcol">
<div id="nav"></div>
<div id="info"></div>
</div><!--lcol-->
<div id="flashcontent">
FLASH player is required to view portions of this site.<br /><br />
<a href="http://www.macromedia.com/go/getflashplayer" target="_blank">
<img src="images/logos/get_flash_player.gif" alt="FLASH player" height="31" width="88" /></a>
</div>
<script type="text/javascript">
var so = new SWFObject("slideshow.swf", "gallery", "560", "380", "6", "#6e868f");
so.write("flashcontent");
</script>
</div><!-- end container --><br />
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 This might be a newbie question. There is a extra space on the top of the side bar in IE and not in FireFox Probably a browser style issue, however I do not know what to over-write. Example is at the following. holzgreen.com/padding/ Thanks for looking. 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?? Hi all, Wierd problem with Opera. The site's working fine on IE and Firefox: http://3003online.com/demos/piplk/ On Opera, it looks almost the same, except the "bottom links" is pushed WAY down, leaving a lot of white space inbetween it and the upper content (i.e. thats a <div id="bottom_links"> which shows the small links you see at the bottom) If you view the source - there's a "right area" which shows you those four logos at the right of the text content: Code:
<div id="right_area">
</div>
(CSS)
#right_area {
width: 109px;
float: right;
background: blue;
height: 260px;
margin-top: 140px;
background: url(../images/0_sidelogos.gif) no-repeat;
}
I noticed, when I remove the "height" and "margin-top" properties from the above style, then Opera shows the site correctly - i.e. without that big gap. However, removing the height means I lose the logos... I need that height to show the image 0_sidelogos.gif Any suggestions? One suggestion would be to remove the background 0_sidelogos and insert an <img> tag of that image within the #right_area. Then I wouldn't need to specify height and Opera should display it fine. However I'd ideally leave it as a background - so any advice to the above would be greatly appreciated. Many thanks!! 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! Is it a good idea to always use padding and never margin (span, divs, etc.)? or would a combination between margin and padding be better? P.S. In some places I must use padding... in the others I use margin but could use padding instead... wouldn't it be more consistent to always use padding? Thank you Hello, Can anyone explain me why the texts in the following example are not in the same (relative) position? It looks like that in the first container, the margin is actually more than I specified (10px)... I don't get it... :S Thanks, diodorus 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" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style type="text/css">
#container{
margin: 0px;
padding: 0px;
width: 1000px;
background: #ccc;
}
.block {
background: #0ff;
float: left;
height: 100%;
margin: 10px;
text-align: left;
width: 230px;
}
.block2 {
background: #0ff;
float: left;
height: 100%;
padding: 10px;
text-align: left;
width: 230px;
}
</style>
</head>
<body>
<p>First:<p>
<div id="container">
<div class="block">aaa</div>
<div class="block">bbb</div>
<div class="block">ccc</div>
<div class="block">ddd</div>
</div>
<p>Second:<p>
<div id="container">
<div class="block2">aaa</div>
<div class="block2">bbb</div>
<div class="block2">ccc</div>
<div class="block2">ddd</div>
</div>
</body>
</html>
I've run into this problem a few times. The padding attribute has spottty support in IE. Same with margin. Has anyone found a workaround? For example, I would like paragraphs and bullet points to have extra space above them. In the past, I've set a style using padding-top to specify this space. However, in IE it yields some bad results. Similarly, I've got some text links which I would like to bump over to the right a few pixels. Padding or margin would sure come in handy. Any other ways to achieve the same result? Okay, So here is the situation and it has had me stumped for 2 days. I have a site that was displaying perfectly on my local server - I have xampp installed to test site locally. I have a site that is displaying perfectly in Opera, Google Chrome, Safari and Firefox....and locally on IE8. Now here is the kicker. Once I upload it to my server online the layout is thrown out of whack in IE. Why would there be a difference between a local view and an online view in IE? The page below renders as I want in Firefox but IE inserts extra spaces I don't want in the 1st list. I've worked out I can get rid of this by removing all whitespace from the html, but this makes for some hard to maintain code. Is there something I can do in css that will make IE handle the list the way I want it to? 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New Document</title>
<style type="text/css">
#nav
{
background: #eef;
font-size: 0.8em;
}
#nav a
{
text-decoration: none;
color: black;
background: #ffe;
display: block;
}
#nav a:hover
{
color: white;
background: blue;
}
#nav ul
{
list-style: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id='nav'>
Example 1
<ul>
<li><a href="">Item 1</a>
<ul>
<li><a href=''>Item 1 1</a></li>
<li><a href=''>Item 1 2</a></li>
<li><a href=''>Item 1 3</a></li>
</ul>
</li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
</ul>
Example 2
<ul><li><a href="">Item 1</a><ul><li><a href=''>Item 1 1</a></li><li><a href=''>Item 1 2</a></li><li><a href=''>Item 1 3</a></li></ul></li><li><a href="">Item 2</a></li><li><a href="">Item 3</a></li></ul>
</div>
</body>
</html>
|
|||||||