|
CSS - Ie Adding Extra Horizontal Spaces, Ff Is Perfect
Similar TutorialsI'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>
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 I've got the standard <ul><li> horizontal menu, but each menu item has a space between it. I've tried wrapping the entire menu in a div with a background color, but so far I've had no luck. Can I change the CSS to not have padding between? also, why does a styled <hr> not appear in Firefox? Thanks for the help! Here is what I have in the code. css Code:
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #FFFFFF;
background-color: #C0C0C0;
}
#navcontainer ul li a:hover
{
color: #C0C0C0;
background-color: #FFFFFF;
}
html Code:
<div id="navcontainer">
<hr />
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="index.html">Products and Services</a>
</li>
<li>
<a href="index.html">Employment</a>
</li>
<li>
<a href="index.html">Blah</a>
</li>
<li>
<a href="index.html">Home</a>
</li>
</ul>
</div>
Hi Everyone, I'm new to the forum and somewhat new to CSS. I am developing a simple webpage that has a horizontal unordered list serving as a navigation bar. Firefox adds what looks like about 20px of extra space above and below the entire list while internet explorer shows it aligned top left. Eventually I would like to center the unordered list top and bottom, but I can't seem to get any alignment formatting to work at all. Here is the problem code: Code: <div id="navbox">
<ul id="navbar">
<li><a href="index.html">HOME</a></li>
<li><a href="http://showrooms.canadatrader.com/7010/7622">INVENTORY</a></li>
<li><a href="formapp.html">APPLY NOW</a></li>
<li><a href="mailto:rjtria@gmail.com">EMAIL ME</a></li>
</ul>
</div>
And the corresponding CSS: Code: #navbox {
background-color: #B1C5D0;
height: 50px;
width: 760px;
overflow: visible;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
color: #036;
font-weight: bold;
font-size: 130%;
font-family: "Courier New", Courier, monospace;
line-height: normal;
}
#navbar li {
display: inline;
list-style-type: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
padding-right: 10px;
padding-left: 10px;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
I know it's not much.. but it's making me crazy. I have tried zeroing out all padding / margins to no avail... Any help would be greatly appreciated!! Thanks in advance! Celeste Hello everyone, I have this issue where Firefox keeps making unwanted spaces between the headers/dividers of my content. My page is located at: hainescityhighschool(dot)com/development/beta (please view in both IE and Firefox to get the idea) I can't post links because of my user status but that should be a valid URL. Anyways, Firefox 3.0 is the version I'm having problems with. I haven't tested it in other versions. Where it says welcome, I want the divider image to be almost directly underneath it, and in IE it works. Only firefox seems to have an issue. Any ideas? Hi folks, my website section "www(dot)mail(dot)tssma(dot)net" has an extra blue bar at the bottom of the page even though i specifically set it to 900 with the following css. I actually dont know why its blue either. Code:
body
{
background-image: url('http://www.tssma.net/templates/renrentemplate/images/Page-BgSimpleGradient.jpg');
top:0;
width: 100%;
height: 900px;
Not only that i cant seem to change the Username and Password input which is currently grey, to black using the css. Help will be greatly appreciated EDIT: Hahah yay, i somehow got rid of the bar on the bottom just need help with the grey input fonts. I have been trying to write a horizontal CSS nav menu for my website thinkmarriage.org/catalog/ based on some code I found. The menu seems to work great, except: 1. it is adding what looks like 30ish pixels of padding on the left side of the menu. I have tested in FF, IE, and Safari, all do the same thing. The code is CSS 2.1 validated. The link to my sample is: thinkmarriage.org/menu2.html 2. When I add the menu into my actual store, in FF it works, but IE turns the horizontal nav into vertical drop boxes. I was pretty sure the style sheets were conflicting with one another, but now the bar is working in FF, and I can't seem to find any problems. The two style sheets are : #1 (for the menu) : thinkmarriage.org/catalog/menustyle.css and #2 (for the site) : thinkmarriage.org/catalog/stylesheet.css The link to the site is above. If anyone has any thoughts as to where the extra padding is coming from or the conflict with the sheets in IE, I would greatly appreciate it. (Sorry, the rules won't permit me to place hyperlinks) I'm having a bit of trouble trying to figure out the problem he http://www.lovemeforme.org/alecia as you can see, in IE the main content is over about 3px, but in firefox it's perfect.. i'm a perfectionist and it's really bothering me. Thanks in advance! Ie is driving me nuts, well I'm coding this web page and it looks perfect so far in firefox, but it looks messed up in IE http://drowninginmytears.org/store/blah.html thats the link.. i want it to look how it is in firefox in IE, but I'm not sure how.. this is my css: Code: body
{
margin: 0px auto;
background-color: #BFD1E1;
text-align: center;
padding: 0px;
background-position: top;
}
#wrap
{
position: relative;
margin: 0 auto;
text-align: left;
width: 679px;
}
#hearts
{
background-image: url(hearts.jpg);
height: 44px;
width: 43px;
position: absolute;
margin-left: 490px;
}
#girl
{
background-image: url(girl.jpg);
margin-top: 190px;
height: 358px;
width: 142px;
margin-left: 10px;
}
h4 {
font-family: Arial, verdana, tahoma;
text-transform: uppercase;
font-size: 1.0em;
text-align: right;
font-weight: bold;
color: #5886B2;
letter-spacing: 0px;
padding: 10px 20px 0px 0px;
margin: 0;
}
h5 {
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.7em;
text-align: right;
line-height: 5px;
font-weight: bold;
color: #C3D4E3;
letter-spacing: 3px;
padding-right: 17px;
margin: 0;
}
#navigation
{
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.54em;
text-align: left;
font-weight: bold;
color: #769DBF;
letter-spacing: 1px;
margin-top: 25px;
margin-left: 20px;
position: absolute;
}
#toptitle
{
background-position:top;
height: auto;
width: 768px;
background-image: url(bg.jpg);
padding: 0px;
margin: 0px;
}
#blueline
{
height: 6px;
width: 752px;
background-color: #D8E8F8;
margin-top: 8px;
margin-left: 8px;
margin-right: 0px;
position: absolute;
}
#headerimage
{
height: 173px;
width: 752px;
background-image: url(main.jpg);
margin-top: 15px;
margin-left: 8px;
position: absolute;
}
#main {
margin-top: 100px;
width: 768px;
margin: 20px 0;
margin-left:40px;
display: inline;
}
#header
{
background-image: url(top.jpg);
vertical-align: bottom;
height: 10px;
width: 768px;
margin-top: 20px;
padding: 0px;
}
#bottom
{
background-image: url(bottom.jpg);
vertical-align: bottom;
height: 17px;
width: 768px;
margin-top: 0px;
padding: 0px;
}
p
{
text-align: justify;
color: #555;
margin-top: 0px;
margin-bottom: 9px;
}
.caps
{
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
ol
{
margin: 0;
padding: 0;
}
ul, li
{
color: #666;
list-style-type: none;
border: 0;
margin: 0;
padding: 0;
}
a:link, a:visited
{
color: #FA65CD;
text-decoration: none;
}
a:hover
{
color: #FD92E0;
}
a:active
{
color: #FB7FD7;
}
#container
{
position: relative;
margin: 0 auto;
text-align: left;
background: url(bgfront.gif) repeat-y;
width: 679px;
}
#content
{
padding: 28px 20px 0 20px;
min-height: 200px;
}
can anyone help? thanks! I think all I need is a new set of eyes. I have an XHTML-Strict-All-Div-Perfect layout for a new site I am working on. I have all of the heights and widths and alignments perfect. Everything was supurb until I added content that extends greater than 100% of the viewport. Typical story, I know. The thing is, I have made hundreds of web sites and came across and fixed that problem. I've used min-height, I've made sure to include all containers like html and body.. I am pretty sure I've done it all. So what's up? Please take a look at the site and tell me what you think. Realms Of Role Playing Hi, I'm looking for code that will display a ul with nested uls as a dropdown. Furthermore, the links and dropdowns should center in the width of the nav. as I add more top level links, the set should expand both left and right. Right now, I can either make the nav align left, or justify the top level ul so the links fill the nav. I can't seem to make the leap to centered links though. You can see what I'm talking about he lipsitzponterio9[dot]com Notice how the home link is left aligned, but contact us has a little space to the right. Can anyone help? Thanks! My website open fine in pretty much everything except IE (Ie is terrible). I tried to use the "if ie" stylesheet link but its not working. Help please. Test server is http://ivorygaming.clanservers.com/debuhrs HTML Code: <html> <head> <title>deBuhrs Seed & Feed</title> <!--[if IE 7]> <link href="ie.css" rel="stylesheet" type="text/css"> <![endif]--> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> </head> <body bgcolor="#070707"> <div id="navbar"><ul id="navbar"> <li><a href="index.html"><span id="green">H</span><span id="white">ome</span></a></li> <li><a href="about.html"><span id="green">A</span><span id="white">bout</span></a></li> <li><a href="staff.html"><span id="green">S</span><span id="white">taff</span></a></li> <li><a href="products.html"><span id="green">P</span><span id="white">roducts</span></a></li> <li><a href="contact.html"><span id="green">C</span><span id="white">ontact</span></a></li> </ul> <div id="logo"></div> <div id="front"></div> <div id="side"></div> <h2>New Website</h2> <hr color="#b9bab9" width="60%" align="left" height="50%"> <p class="postinfo">posted by Bernie deBuhr at 10.39 p.m. Sunday, July 4th, 2009</p> <p class="content">    deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.</p> <div id="bottom"></div> <div id="container"></div> </body> </html> ie.css Code: @charset "utf-8"; /* CSS Document */ body { margin: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding: 0; text-align: center; } #container { width: 1024px; height: 15px; margin: 0 auto 0 auto; text-align: left; } #logo { height: 112px; width: 702px; padding-bottom: 0px; padding-top: 0px; margin-top: 1000px; margin-left: -200px; background: #FFF url('images/logo.png') ; } #front { height: 269px; width: 619px; padding-bottom: 0px; padding-top: 0px; margin-top: 0px; margin-left: 5px; background: #FFF url('images/front.png') ; } #side { height: 444px; width: 312px; padding-bottom: 0px; padding-top: 0px; margin-top: -269px; margin-left: 700px; background: #FFF url('images/side.png') ; } #block { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -177px; margin-left: 10px; background: #FFF url('images/block.png') ; } #block1 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 124px; background: #FFF url('images/block.png') ; } #block2 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 238px; background: #FFF url('images/block.png') ; } #block3 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 352px; background: #FFF url('images/block.png') ; } #block4 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 466px; background: #FFF url('images/block.png') ; } #navbar ul li { padding-left: -10px; position: relative; display: inline; padding-top: 383px; color: #FFFfff; float: left; font-size: 10pt; font-family: arial; font-style: italic; margin-left: 15px; } #green { color: #9bf006; font-size: 11pt; font-family: arial; font-style: italic; } #white { color: #c8cbc3; font-size: 9pt; font-family: arial; font-style: italic; } a { text-decoration:none; color:#930; border-bottom: 1px solid #5b8c04 } h1,h2,h3,h4,h5 { margin:0; text-align:left; color:#9bf006; font: arial; margin-top: -100px; margin-left: 15px; } p.postinfo { margin:0; text-align:left; color:#a0a19e; font: arial; margin-top: 0px; margin-left: 35px; font-size: 8pt; } p.content { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: 15px; margin-left: 40px; font-size: 10pt; width: 600px; height: 200px; } p.phone { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: -180px; margin-left: 40px; font-size: 10pt; } p.email { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: 3px; margin-left: 40px; font-size: 10pt; } #bottom { height: 269px; width: 619px; padding-bottom: 0px; padding-top: 0px; margin-top: 0px; margin-left: 5px; background: #FFF url('images/bottom.png') ; }
Hi, we are hoping someone can help us figure out why (besides the obvious) our CSS isn't rendering our site correctly in any version of IE. If you take a look at our website (DJDeals) in Chrome or Safari, you'll see how it should look. Then take a look in IE. The shopping cart and other major features are WAY our of place... help? Hi all, I'm pretty anal about the layouts I make.. especially when it comes to my own site. This is the first time I have really attempted designing to validate within the strict doctype. The only thing is the layout I am trying to get to work requires A LOT of layers, and a lot of them need to line up with eachother. I am running in to problems because some layers are pushed down further than others on the page. The difference is noticeable (10 or 15 pixels) when I change from Firefox to Explorer. Is there anyway around this, am I missing something here? My page is uploaded at http://www.studioflow.net/display.html and my css file is here http://www.studioflow.net/sfglobal.css Do I need to just abandon my quest for pixel perfect alignment? Thanks, alan Hi, im just getting into CSS, and decided to convert my website from HTML w/ Tabkes to CSS , for smaller load times, make it more professional.. My problem is, I just finished and it looks fine under Firefox (Linux & Windows).. But it looks absolutely horrible in IE? Can anyone find an mistake. I validated the CSS with W3's validater thing. http://mp3realm.org/new/index.php (First one) http://mp3realm.org/new/search.php (search page) http://mp3realm.org/new/default.css (CSS) Thanks. <body> <div id="wrapper" style=" vertical-align:middle;"> <div id="border-top"> <div id="border-left"> <div id="border-right"> <div id="border-bottom"> </div> </div> </div> </div> </div> </body> body { background-color:#5E362C; margin: 0 0 0 0; } #wrapper { width: 828px; height: 558px; position:relative; left: 50%; margin-left:-414px; } #border-top { background-image: url(../Webdesign/MIRAGE services1_r2_c2.jpg); background-position:top left; background-repeat:no-repeat; width: 828px; height: 558px; } #border-left { background-image: url(../Webdesign/MIRAGE services1_r3_c2.jpg); background-position:top left; background-repeat:no-repeat; width: 828px; height: 558px; margin-top:20px; } #border-right { background-image: url(../Webdesign/MIRAGE services1_r3_c18.jpg); background-position:top right; background-repeat:repeat-y; width: 828px; height: 557px; margin-top:-20px; margin-bottom:20px; } #border-bottom { background-image: url(../Webdesign/MIRAGE services1_r10_c3.jpg); background-position:bottom right; background-repeat:no-repeat; width: 828px; height: 558px; margin-top:-1px; } Thanks for the help ! Hello everyone. I have been working on a redesign of my current website for a while. Early on, I realized that the design was flawed for I.E. (I use Firefox on a regular basis for testing). I went ahead and just finished the design anyway, using Firefox to test. Now that it's done, I'm hoping that there's some stupid error in my CSS that's causing the problems, and hoping that someone can find the problem. If it's a big problem and alot of work to fix, I'm willing to pay someone to help me correct the issue. The main problem is my navigation bar at the top, which consists of drop-down menus. There's also a problem with how the background lines up. If you want to see what I'm talking about, go look at the site both in Firefox and I.E. The URL is: http://www.favillephoto.com/new website/index.html I have 2 different css files. One for my index page, because it is designed differently and has a sidebar. And then a second one for the rest of my pages on the site. I'll attach the CSS for both, in case there's an issue there. Thanks in advance for your help. This is the css file for my index page: Code: body {
padding: 0;
background: #ffffff url('images/img01.jpg');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
color: #AD1112;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 140%;
font-weight: bold;
}
h4 {
font-size: 100%;
font-weight: bold;
}
p, ol, ul {
line-height: 180%;
}
p {
}
ol {
}
ul {
}
blockquote {
margin: 0;
padding-left: 20px;
font-style: italic;
}
blockquote * {
line-height: normal;
}
a {
color: #1267bc;
}
a:hover {
color: #999999;
}
img {
border: none;
}
img.left {
float: left;
margin: 10px 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
hr {
display: none;
}
/* Header */
#header {
width: 1030px;
height: 260px;
margin: 0 auto;
background: url('images/img02.jpg') no-repeat right top;
}
/* Menu */
#menu {
float: right;
width: 1030px;
height: 40px;
padding: 220px 0 0 0;
}
#menu a {
display: block;
height: 32px;
background: url('images/img06.gif') no-repeat;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}
#menu ul {
width: 1026px;
height: 40px;
margin: 0;
padding: 0;
background: #AD1011 url('images/img05.jpg') repeat-x;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
list-style-type:none
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu li a:hover
{ color: #123456;}
#menu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #000000;
}
#menu div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: auto;
height: 20px;
white-space: nowrap;
text-align: left;
background: #6c91c5;
color: #ffffff;}
#menu div a:hover
{ color: #123456;}
/* Page */
#page {
width: 1030px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 760px;
height: 2040px;
padding: 20px;
background: #FFFFFF url('images/img07.gif') no-repeat left bottom;
}
/* Sidebar */
#sidebar {
float: right;
width: 220px;
height: 2070px;
padding-top: 10px;
padding-right: 10px;
background: #ffffff url('images/img07a.gif') no-repeat right bottom;
}
#sidebar a {
color: #dddddd;
}
#sidebar a:hover {
color: #999999;
text-decoration: underline;
}
#sidebar ul {
margin-left: 0;
padding-left: 0;
list-style: none;
font-size: 92%;
}
#sidebar ul li {
background: url('images/img13.gif') no-repeat 0px 12px;
border-top: 1px solid #0B0B0B; padding-left:14px; padding-right:14px; padding-top:5px; padding-bottom:5px
}
#sidebar ul li.first {
border: none;
}
#sidebar ul li h2 {
margin: 0;
font-size: 100%;
}
#sidebar ul li h3 {
margin: 0;
font-size: 92%;
}
#sidebar ul li p {
color: #dddddd;
margin: 0;
}
#sidebar p {
color: #dddddd;
margin: 0;
font-size: 92%;
}
.boxed {
margin-bottom: 10px;
background: #113c5c url('images/img10.gif') no-repeat left bottom;
}
.boxed .title {
height: 30px;
margin: 0;
background: #000000 url('images/img08.jpg') no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}
.boxed .content {
padding: 15px;
background: url('images/img09.gif') repeat-x;
}
.boxedPrintoftheMonth {
margin-left: -790px;
background: #113c5c url('images/img10PotM.gif') no-repeat left bottom;
}
.boxedPrintoftheMonth .title {
height: 30px;
margin: 0;
background: #000000 url('images/img08PotM.jpg') no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}
.boxedPrintoftheMonth .content {
padding: 15px;
background: url('images/img09.gif') repeat-x;
}
/* Footer */
#footer p {
margin: 0;
line-height: normal;
font-size: 85%;
color: #000000;
}
#footer a {
color: #000000;
}
#footer a:hover {
color: #666666;
}
This is the css for the rest of my pages: Code:
body {
padding: 0;
background: #ffffff url('images/img01.jpg');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
color: #AD1112;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 140%;
font-weight: bold;
}
h4 {
font-size: 100%;
font-weight: bold;
}
p, ol, ul {
line-height: 180%;
}
p {
}
ol {
}
ul {
}
blockquote {
margin: 0;
padding-left: 20px;
font-style: italic;
}
blockquote * {
line-height: normal;
}
a {
color: #1267bc;
}
a:hover {
color: #999999;
}
img {
border: none;
}
img.left {
float: left;
margin: 10px 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
img.left1 {
float: left;
margin: 0 70px 0 70px;
}
img.right1 {
float: right;
margin: 0 70px 0 70px;
}
img.left2 {
float: left;
margin: 20px 100px 20px 100px;
}
img.right2 {
float: right;
margin: 30px 120px 20px 120px;
}
img.left3 {
float: left;
margin: 0 110px 0 110px;
}
img.right3 {
float: right;
margin: 20px 60px 0 60px;
}
hr {
display: none;
}
/* Header */
#header {
width: 1030px;
height: 260px;
margin: 0 auto;
background: url('images/img02.jpg') no-repeat right top;
}
/* Menu */
#menu {
float: right;
width: 1030px;
height: 40px;
padding: 220px 0 0 0;
}
#menu a {
display: block;
height: 32px;
background: url('images/img06.gif') no-repeat;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}
#menu ul {
width: 1026px;
height: 40px;
margin: 0;
padding: 0;
background: #AD1011 url('images/img05.jpg') repeat-x;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
list-style-type:none
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu li a:hover
{ color: #123456;}
#menu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #000000;
}
#menu div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: auto;
height: 20px;
white-space: nowrap;
text-align: left;
background: #6c91c5;
color: #ffffff;}
#menu div a:hover
{ color: #123456;}
/* Page */
#page {
width: 1030px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 990px;
padding: 20px;
background: #FFFFFF url('images/img07b.gif') no-repeat left bottom;
}
/* Footer */
#footer p {
margin: 0;
line-height: normal;
font-size: 85%;
color: #000000;
}
#footer a {
color: #000000;
}
#footer a:hover {
color: #666666;
}
Hi, I've just spent all night re-building my site as HTML and CSS, since my Joomla site was suffering from a slight case of death due to "hosting issues" during a plaform migration I've got the site looking and working sweet, apart from one small thing. In Netscape 8.1 which I currently have installed, it loads the content in the right of the design right down at the bottom of the screen. When you refresh the browser it jumps back to the top, and it works perfectly for all links !!! It displays superbly in IE all of the time. I've been through the CSS checking that I'm using the clear and float in the right places, and I've checked the actual widths of all of the elements to be sure that they add up to what they are supposed to, but somehow it's still only displaying properly in Netscape after a page refresh. I've put in all of the box model hacks in my code for old browsers. The only thing that stops this from happening is removing the tag "display:table;" in my CSS. But that's used to extend the faux columns down to the bottom of the screen in Netscape. I'm not keen on any of the hacks for extending columns, so I decided on faux columns. The thing is, if it is that tag that's causing it to display incorrectly, why is it having no effect when the page gets reloaded? Try for yourself. Click a link in the menu a few times, then click the refresh button a few times. You will see the content load incorrectly, and then correctly! Puzzling. http://www.acecards.com Code: body {
background-color: #999999;
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
}
#container {
width: 750px; /* For browsers with no escapes */
\width: 770px; /* For IE5/Win */
w\idth: 750px; /* For good browsers */
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: #000000;
}
#banner {
width: 750px; /* For browsers with no escapes */
\width: 750px; /* For IE5/Win */
w\idth: 750px; /* For good browsers */
height: 251px;
background-repeat: no-repeat;
clear: both;
}
#mainarea {
clear: both;
width: 750px; /* For browsers with no escapes */
\width: 750px; /* For IE5/Win */
w\idth: 750px; /* For good browsers */
background: url(images/fauxcolumns.gif) repeat-y;
display: table;
}
#sidebar {
width: 179px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 179px; /* For good browsers */
background-color: #993300;
float: left;
}
#content {
margin-top: 0px;
float: right;
background-color: #FFFFFF;
width: 570px; /*For browsers with no escapes */
\width: 570px; /*For IE5/Win*/
w\idth: 570px; /*For good browsers */
}
#footer {
width: 740px; /* For browsers with no escapes */
\width: 750px; /* For IE5/Win */
w\idth: 740px; /* For good browsers */
padding: 5px;
clear: both;
}
.FooterText {
font-family: Verdana;
color: #FFFFFF;
font-size: 10px;
text-align: right;
}
.Bodytext {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
line-height: 17px;
text-align: justify;
padding-left: 20px;
padding-right: 20px;
padding-top: 2px;
padding-bottom: 2px;
}
.Bodylink {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #499EEE;
font-size: 12px;
line-height: 17px;
font-weight: bold;
text-align: left;
padding-top: 2px;
padding-bottom: 2px;
}
.Bodyhighlight {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #993300;
font-size: 12px;
line-height: 17px;
font-weight: bold;
text-align: left;
padding-top: 2px;
padding-bottom: 2px;
}
.SideBarBanner {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
line-height:inherit;
padding-top: 5px;
padding-bottom: 5px;
}
.SideBarLink {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.SideBarHeadingTop {
background-color: #FF9B6A;
height: auto;
width: 169px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 169px; /* For good browsers */
padding: 5px;
color: #000000;
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-bottom:thin solid;
border-bottom-color:#D74600;
}
.SideBarHeading {
background-color: #FF9B6A;
height: auto;
width: 169px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 169px; /* For good browsers */
padding: 5px;
color: #000000;
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top:thick solid;
border-top-color:#000000;
border-bottom:thin solid;
border-bottom-color:#D74600;
}
.SideBarMenuBlock {
background-image: url(images/button.gif);
background-repeat: no-repeat;
height: 26px;
margin-top: 4px;
margin-bottom: 0px;
padding-left: 20px;
margin-left: 9px;
margin-right: 9px;
width: 159px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 159px; /* For good browsers */
text-align: left;
vertical-align: middle;
color: #000000;
font-size: 11px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: underline;
}
.Heading {
width: 520px; /* For browsers with no escapes */
\width: 570px; /* For IE5/Win */
w\idth: 520px; /* For good browsers */
padding-left: 40px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 10px;
background-image: url(images/aceofspades.gif);
background-repeat: no-repeat;
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: left;
vertical-align: top;
font-weight: bold;
font-style: italic;
}
img {
border: none;
}
I'm using a two column layout (main, sidebar), and within the main column, there is a section that breaks into two columns. I'm using this code:
Code: <div>
<p>Some main column content</p>
</div>
<div id="inner_col_wrap">
<div id="col_left">
<p class="col">Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
<div id="col_right">
<p class="col">Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
</div>
<div>
<p>Some more main column content</p>
</div>
The problem is that some of the content that follows the two column block ("Some more main column content") is pushed up into the "col_right" DIV when "col_left" and "col_right" are not equil ("col_right is shorter than "col_left", and there is space at the bottom). How to keep the conent that follows the two column block out of it? |
|||||||