|
CSS - Extra 5px Padding In Ff
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 />
Similar TutorialsThis 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, 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!! 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> 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 Hello, Interesting problem... I have a span tag with a small font in it. When I don't specify a doctype, there is no red "padding" for lack of a better word. When I specify a strict xhtml doctype, I do get "red padding". I tried setting the padding to zero, but it didn't help. How can I get rid of the "red padding"? 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" dir="ltr" lang="en"> <table cellspacing="0" cellpadding="0"> <tr> <td style="background: red; padding: 0px;"> <span style="font-size: 50%; background: blue; padding: 0px;"> How can I get rid of the red space? </span> </td> </tr> </table> Thanks! Hello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey Hey everyone, I am making a design to kill some time, and I have come across a problem. I have a menu at the top which has no top padding unless I give it padding of 87px. I find this very odd, and it happens in every browser( Firefox 2.0.0.3, Opera 9, IE6-7 ); is it a bug in CSS itself or am I doing something wrong? Here is my code, maybe I am missing something. html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> body { background-color: #082567; color: #FFFFFF; margin: 0; padding: 0; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: justify; } #top-menu { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; height: 130px; } #top-menu h1 { float: left; font-weight: bold; letter-spacing: -3px; font-size: 31px; padding: 5px; } #menu { float: right; list-style-type: none; text-align: center; } #menu li { display: inline; } #menu a { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; color: #FFFFFF; padding: 50px; } #menu a:hover { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg ); background-repeat: repeat-x; } </style> </head> <body> <div id="top-menu"> <h1>ryon.hunter</h1> <div id="menu"> <ul> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> </ul> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I validated it and it validates fine, any suggestions? I am developing a website using CSS. I have created a navigation bar and associated styles. In each of the 4 menu drop downs, the third item has an extra border that stretches beyond the width and is in about the center of the item. I have reviewed, tried this, and tried that but cannot find out why the extra border occurs. If someone could help, I would appreciate the help a great deal. You can find the developing website at tamp.trustedtechpro.com and the css at tamp.trustedtechpro.com/styles/ff3.tamp.css Thanks. So I am trying to move from designing in <tables> and move on to the beauty of the CSS box-model design. I have been inspired by one of the ZenGarden designs and wanted to see if I could try and duplicate it's flow. I am running into a problem. I have created the outer box "#mainBox" and nested within this I have a child "#pageHeader." Problem is that there is this big amount of space (that is present in both IE6 AND FireFox 1.0) at the bottom of "#pageHeader." See the attached pic for the exact detail. Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><title>The Shalom Foundation</title>
<style type="text/css">
<!--
body {
text-align:center;
background-color:#666666;
margin:0 0 50px 0; /* top right bottom left */
}
p{
padding:0;
margin:0;
text-align:justify;
}
#mainBox {
float:right;
margin:9px 12px 0 0;
padding:0px;
width:733px;
text-align:left;
background-color:#999999;
}
#pageHeader{
background: url(images/layout/header.jpg) no-repeat top left;
padding:0;
margin:0;
text-indent: -15000px;
height: 290px;
overflow: hidden;
}
#nav{
position:absolute;
right:100px;
margin:0;
background: url(images/layout/menu.jpg) no-repeat top left;
padding:0;
margin:0;
width:136px;
height: 302px;
overflow: hidden;
}
-->
</style>
</head>
<body>
<div id="mainBox">
<div id="pageHeader">The Shalom Foundation</div>
<div id="nav">Nav</div>
<div id="contentHdr"><table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle"><img src="images/layout/hdr_about_us.gif"></td></tr></table></div>
<div id="content"><p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua
portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen
laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum, donec
requiescat in te. da mihi, domine, scire et intellegere, utrum sit prius invocare te an laudare te, et scire te prius sit an invocare te. sed quis te
invocat nesciens te? aliud enim pro alio potest invocare nesciens. an potius invocaris, ut sciaris? quomodo autem invocabunt, in quem non crediderunt?
aut quomodo credent sine praedicante? et laudabunt dominum qui requirunt eum. quaerentes enim inveniunt eum et invenientes laudabunt eum. quaeram te,
domine, invocans te, et invocem te credens in te: praedicatus enim es nobis. invocat te, domine, fides mea, quam dedisti mihi, quam inspirasti mihi
per humanitatem filii tui, per ministerium praedicatoris tui.</p></div>
<div id="rightNav">rightNav</div>
<div id="pageFooter">pageFooter</div>
</div>
</body>
</html>
Thanks in advanced for any help! Hi guys, I'm pretty new to CSS. I had this style sheet set up, and it was working in Firefox just fine. When I tested it on IE, the center logo instead of being approximately 15 pixels down from the top, it's right at the top. I was able to get those 15 pixels to appear in IE with 2 changes, but now there is an extra 15 pixels in Firefox, so it is down approx. 30 pixels. Can anybody see what I'm doing wrong, or provide a hack that will fix it? css Code: Original - css Code /* This CSS works in FF. I have put the changes in comments that will make it work in IE. Both changes were in the Header section. */ body { margin:0px; margin-bottom:50px; padding:0px; text-align:center; background-image:url(../images/bg-grn2.gif); } a:link {color:#0000EF;} a:active {color:#EF0000;} a:visited {color:#52188C;} div#FS-Logo { position:absolute; top:10px; left:10px; height:110px; width:100px; background:url(../images/left-logo.gif) top left no-repeat; margin:10px; padding:0; } div#FWS-Logo { position:absolute; top:10px; right:10px; height:110px; width:100px; background:url(../images/right-logo.gif) top right no-repeat; margin:10px; padding:0; } div#Header { width:300px; height:140px; /*change this to 155px*/ margin:0px auto; text-align:center; font-family:"Trebuchet MS", serif; background:url(../images/center-logo.gif) no-repeat top center;/*change this to 'no-repeat center center'*/ } div#Main-content { width:55%; height:500px; margin:0px auto; text-align:left; padding:0px; border:1px dashed #333; background-color:#ded794; font-family:verdana, sans serif; font-size:12px; } div#Left-column { position:absolute; top:155px; left:15px; width:15%; height:500px; margin:0; text-align:left; border:1px dashed #333; background-color:#ded794; font-family:verdana, sans serif; font-size:12px; } div#Right-column { position:absolute; top:155px; right:15px; width:15%; height:500px; margin:0; text-align:left; border:1px dashed #333; background-color:#ded794; font-family:verdana, sans serif; font-size:12px; } div#Footer { position:static; bottom:10px; right:15px; width:100%; margin:0; padding:0; text-align:center; font-family:verdana, sans serif; font-size:14px; } .hd-header {color:#8A4B2C;} .hd-footer {color:#000000;} .hd-main {color:#FFFFFF;} /* This CSS works in FF. I have put the changes in comments that will make it work in IE. Both changes were in the Header section. */ My html page is this. html Code: Original - html Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="styles/decaid.css"> </head> <body> <div id="FS-Logo"> <p> </p> </div> <div id="Header"> <p> </p> </div> <div id="FWS-Logo"> <p> </p> </div> <div id="Left-column"> <p>Main Links Will be here</p> </div> <div id="Main-content"> <p class="hd-main">Main content is here.</p> </div> <div id="Right-column"> <p>External Links here</p> </div> <div id="Footer"> <p class="hd-footer">Footer goes here</p> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="styles/decaid.css"> </head> <body> <div id="FS-Logo"> <p> </p> </div> <div id="Header"> <p> </p> </div> <div id="FWS-Logo"> <p> </p> </div> <div id="Left-column"> <p>Main Links Will be here</p> </div> <div id="Main-content"> <p class="hd-main">Main content is here.</p> </div> <div id="Right-column"> <p>External Links here</p> </div> <div id="Footer"> <p class="hd-footer">Footer goes here</p> </div> </body> </html> I'm working on a web site that has a jFlow slideshow (not implemented just yet) and I was mocking up a page with just a plain img in its place. When the page is viewed in FF 3.5, there is extra space to the right and bottom of the image. However, it shows as expected in IE8. I can't figure this out for the life of me. If I "use border box model" from the Google Web Developer toolbar in FF, it shows as desired as well. Here's a link to the file: http://www.websimage.com/3238/index2.html I've been trying to figure this out for a while now and I'm getting nowhere but frustrated, so any help you could provide would be *greatly* appreciated. EDIT: I've found some information regarding box-models, and have applied the -moz-box-model: border-box; which seems to have eliminated the additional space within the gray div...however, there is an additional 10px of unwanted padding on the right & left of it now. I can live with this, but I don't want to if I don't have to. Edit #2: If I take out the margin-left: auto; and margin-right: auto; (to center it) the extraneous padding is not on the left, but is added to the extraneous padding on the right. All the math adds up when it comes to the widths and padding specified for the respective "wrappers" so I'm at a loss as to what's causing this. Hi, I am new here, asked this question at another forum and never got an answer so I hope someone here can help. "Is there any way to remove 200px from the bottom of my site and keep the same layout using divs? I had to give the wide div next to the thin one a top: -208px to get it to line up with the thin one. and then I had to bring up the copyright one the same way so it lined up under them. Now I am stuck with an extra 200px under them (really it's 208, but I want an 8px space at the bottom)." Site: http://www.kendallstudios.com/index2.php CSS File: http://www.kendallstudios.com/styles/standard.css http://www.zombiepolitics.com Just when I thought I had this down .. I dont. I have a CSS layout .. there are two main divs side by side, the navigation rests at the top of the right div. problem is in IE 6 there is so much extra space at the top that my navigation doesnt line up with my header .. in FF its no problem. What is the workaround for this? 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 http://josephman1988.tripod.com/ Test page. In FF, the gap between the 2 horizontal lines at the bottom is more narrow then it is in IE. Why? And how can i fix this? Thanks for the help. Joe. 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;
}
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;
}
For some reason, I cannot for the life of me figure out why Firefox is adding space at the top of my page. I have a container div that contains my header, body, and footer. I have done this: Code: #container{
width: 732px;
margin: 0px auto;
}
Too me that should fix the issue. I even tried applying that code to the body{ ... } but that doesn't work either. Has anyone else gone through this before. There is no space in IE6 or IE7. Thanks, teamhonda81 I am working on a site and have found a problem that I can't explain on my own. I would like someone to look at this site: http://www.canada-training-group.ca and tell me why there is extra space at the top in IE but not in Firefox. Thanks, Timmy-d |
|||||||