|
CSS - Ie Renders Margin With Extra 1 Pixel
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? Similar TutorialsHi 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?? 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 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 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 Check out the below test page... In FF, i get a left margin of 5px, and a right margin of 10px as expected, but in IE6 i get a left margin of 10px, and a right margin of 20px. Anyone know why? If I absolute position with left:10px, and right:10px on the relevant boxes they are positioned correctly in IE6, so why don't the margins work? (Can't use absolute positioning as i require flow layout in my real-life page) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#leftnav{
width: 20%;
float: left;
clear: left;
margin-left: 5px;
border: solid 1px #000000;
}
#main{
width:76%;
float: right;
clear: right;
margin-right: 10px;
border: solid 1px #000000;
}
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF">
<div id="leftnav">
some text some text<br>
some text some text
</div>
<div id="main">
<p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
</div>
</body>
</html>
Am I missing some syntax here? In IE this image won't show up, in Firefox no problem. <img src="http://us.f2.yahoofs.com/users/41732981z94cf47c3/c124/__tn_/1186.jpg?ph.UM1BByCkprWYq"></a> web site herehere : small logo tag on upper right sidebar. . . I'm a newbie so be gentle. . . Thanks!! has anyone every had css render different on diffrent hosts? I have a small website which i tested on firefox 1.6 and IE6 locally. When i upload it, some things change, my nav <li>'s become narrower and images dont fit on 1 line anymore? any ideas what can cause such behaviour? I had a similar problem earlier this week and it turned out to be solved by changing the encoding of my php files to ASCII instead of the default UTF-8 set by MS Expression Web. The problem I have now is that one of my pages looks wrong in IE7. The same page looks fine in IE8, FireFox 3, Chrome, Opera, and Safari. This is what it looks like in IE7: This is what it looks like in IE8 and all the other browsers mentioned above: The page can be seen he http://dev.asbco.com/products/commercialindustrial/ Any help is greatly appreciated! Thanks! I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? I've been working on a css zen garden and I've only got one more roadblock untill it is complete... The site works perfectly in IE 6 but all the other browsers don't like it so much. I suspect the problem lies in the positioning of the preamble and the supporting text, but I've tried nearly everything...I can make the site work in other browsers but then resizing the text causes the page to break. Plz help me make the site look and behave the way it does in IE accross all browsers. Here is the page- http://phobos.ramapo.edu/~chdonnel/zenie/ here is the css- http://phobos.ramapo.edu/~chdonnel/zenie/sample.css also the site closely follows the layout methods of this page http://csszengarden.com/?cssfile=/179/179.css&page=1 Thanks, Chris Hello, I am trying to use the hr tag to create a visual division between news stories on this web page http://www.heshimakenya.org/newsmedia.html When I view this page in Firefox on a Mac, the story headlines are immediately under the hr line. I want to add some bottom padding to this line so there is some white space between the line and the headlines. I have used the hr tag in other sites and have never had this rendering issue before so I'm really stuck. For example, the site below uses the hr tag but when viewed in Firefox on a Mac, the lines render fine. http://oharenoise.org/ Has anyone seen hidden inputs being rendered as periods or dots under FF? I am using FF 3.5.4. Is this normal? Thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-language" content="en">
<title>Funny Dots</title>
<style type="text/css">
input
{
border:1px solid blue;
display:inline-block;
}
</style>
</head>
<body>
<form action="index.php" method="post" name="mainForm">
<input type="hidden" name="aaa" value="5" />
<input type="hidden" name="bbb" value="" />
<input type="hidden" name="ccc" value="" />
</form>
</body>
</html>
I am working on a development site (http://dev.asbco.com/products/commercialindustrial/ ) and I am getting different looks in Safari and Chrome. IE8/FireFox 3/Opera all render the page correctly, Safari and Chrome are off. Any ideas how to fix this issue? Thanks! [EDIT] I meant Safari and Chrome not Safari and FireFox 3. Hey everyone, the development site I'm working on is here.... http://firstchoiceflooring.stealthwd.ca/ The font in the top navigation is Media Gothic.... well, it's SUPPOSED to be. It's rendering really strange. I'm using @font-face. My font looks fine in photo shop, but it doesn't render correctly in FF or website (no IE yet). My CSS is like this.... Code: @font-face {
font-family: mediaGothic;
src: url( "http://firstchoiceflooring.stealthwd.ca/images/fonts/Md_Gothic11.eot" ); /* IE */
src: url( "http://firstchoiceflooring.stealthwd.ca/images/fonts/Md_Gothic11.ttf" ) format("truetype"); /* non-IE */
}
Code: #topNavContainer p{
height:100%;
width:100%;
text-align:center;
font-family: mediaGothic;
}
Any help would be appreciated. This is my first time using @font-face Hey, for a while I've been developing a site, just to improve my skills in php etc. I always tested it in IE7/IE8 and Mozilla 3, I knew other browsers wouldn't render it great, but I also need things to look okay with Chrome. This is how my site SHOULD look: This is how it looks in chrome: My site URL is http://www.pokerbrothers.net The HTML for the entire page: The parts that effect the 2 bars that are broken in chrome are highlighted Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="poker,brothers,free,fast,simple,texas,holdem,guest" />
<meta name="robots" content="follow,index" />
<title>Home :: PokerBrothers.net</title>
<link href="http://www.static.pokerbrothers.net/css/include?load=15&x=182&y=631" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Globs
var session_id = "pjpennan89o2m1dn6kjh4n48d7";
var session_userid = 0;
var session_username = "Guest_";
var session_location = "http://www.pokerbrothers.net/";
var session_location_encoded = "http%3A%2F%2Fwww.pokerbrothers.net%2F";
var session_location_last = "";
function pageOnLoad () {
setTimeout("pbhttp_Session_Exit(true, '15')", 900000);
}
</script>
<script type="text/javascript" src="http://www.static.pokerbrothers.net/js/class.js" defer="defer"></script>
<script type="text/javascript" src="http://www.static.pokerbrothers.net/js/global.js" defer="defer"></script>
</head>
<body onload="pageOnLoad();">
<div id="container" align="center">
<div class="bar_container">
<ul id="bar_header">
<li id="bar_header_left"></li>
<li id="bar_header_title"><a href="http://www.pokerbrothers.net/"></a></li>
<li id="bar_header_fill"></li>
<li id="bar_header_howtoplay"><div/><a href="http://www.faq.pokerbrothers.net/play/how"></a></li>
<li id="bar_header_signup"><div/><a href="http://www.signup.pokerbrothers.net/"></a></li>
<li id="bar_header_play"><div/><a href="http://www.play.pokerbrothers.net/"></a></li>
</ul>
</div>
<div class="bar_container">
<div id="bar_navigation">
<div id="bav_navigation_top">
<div id="bar_navigation_top_left"></div>
<div id="bar_navigation_top_fill">
<div id="bar_navigation_top_fill_loginarea">
<form id="navlogin" name="navlogin" action="http://www.login.pokerbrothers.net/login" method="post" onsubmit="return pbhttp_nav_login_check()">
<div id="bar_navigation_top_fill_loginarea_usernamearea">
<input type="text" id="navlogin_username" name="navlogin_username" maxlength="30" value="Username" onfocus="nav_login_form_onclick('user');" onblur="nav_login_form_exit('user')" />
</div>
<div id="bar_navigation_top_fill_loginarea_passwordarea">
<input type="text" id="navlogin_password" name="navlogin_password" maxlength="30" value="Password" onfocus="nav_login_form_onclick('pass');" />
</div>
<div id="bar_navigation_top_fill_loginarea_submitarea">
<input type="submit" id="navlogin_submit" name="navlogin_submit" value="" />
</div>
</form>
</div>
<div id="bar_navigation_top_left_text">
Welcome to PokerBrothers. Please login or <a href="http://www.signup.pokerbrothers.net/">Sign up</a>
</div>
</div>
<div id="bar_navigation_top_right"></div>
</div>
<div id="bar_navigation_bottom">
<div id="bar_navigation_bottom_left"></div>
<div id="bar_navigation_bottom_fill">
</div>
<div id="bar_navigation_bottom_right"></div>
</div>
</div>
</div>
<div class="bar_container">
<table id="bar_body" cellpadding="0" cellspacing="0" border="0">
<tr id="bar_body_top">
<td id="bar_body_box1_top_left"></td>
<td id="bar_body_box1_top_fill" align="center"><div id="bar_body_box1_top_text"></div></td>
<td id="bar_body_merge_top"></td>
<td id="bar_body_box2_top_fill" align="center"><div id="bar_body_box2_top_text"></div></td>
<td id="bar_body_box2_top_right"></td>
</tr>
<tr id="bar_body_middle">
<td id="bar_body_box1_middle_left"></td>
<td id="bar_body_box1_body">
Welcome to PokerBrothers.net, bleh.
</td>
<td id="bar_body_merge_middle"></td>
<td id="bar_body_box2_body">
Load ad here
</td>
<td id="bar_body_box2_middle_right"></td>
</tr>
<tr id="bar_body_bottom">
<td id="bar_body_box1_bottom_left"></td>
<td id="bar_body_box1_bottom_fill"></td>
<td id="bar_body_merge_bottom"></td>
<td id="bar_body_box2_bottom_fill"></td>
<td id="bar_body_box2_bottom_right"></td>
</tr>
</table>
</div> </div>
</body>
</html>
And the CSS... Direct links: Some CSS that effects both bars: http://www.static.pokerbrothers.net...de?load=6&x=571 The top bar's css: http://www.static.pokerbrothers.net/css/headerbar.css the other bar's css: http://www.static.pokerbrothers.net/css/navbar.css I'm wondering if anybody has any clues as to why my site appears like this, i've spent hours and hours trying countless things but to no avail. Any help on anything related to this will be appreicated, thanks . Oh, and sorry for the lack of commenting in the CSS, it wasnt planned... It is quite messy Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site Test</title>
<link rel="stylesheet" type="text/css" href="redo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>
<body>
<div id="top_filler">
</div>
<div id="left_filler">
</div>
<div id="right_filler">
</div>
<div id="top_left">
</div>
<div id="header">
</div>
<div id="top_right">
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Etc, etc, etc....</p>
</div>
<div id="bottom_filler">
</div>
<div id="bottom_left">
</div>
<div id="bottom_right">
</div>
</body>
</html>
The CSS Code: * {
margin: 0;
padding: 0;
}
body {
background: #fdd9e9;
}
div#top_filler {
background: url(images/bg_slice_sm.png) repeat-x;
width: 100%;
height: 164px;
position: fixed;
top: 0px;
z-index: 5;
}
div#left_filler {
background: url(images/left_slice_sm.png) repeat-y;
width: 174px;
height: 100%;
position:fixed;
left:0px;
z-index: 5;
}
div#right_filler {
background: url(images/right_slice_sm.png) repeat-y;
width: 161px;
height: 100%;
position:fixed;
right: 0px;
z-index:5;
}
div#bottom_filler {
background: url(images/bottom_slice_sm.png) repeat-x;
width: 100%;
height: 76px;
position: fixed;
bottom: 0px;
z-index: 5;
}
div#header {
position: fixed;
top: 0px;
left: 37%;
height: 125px;
width: 316px;
margin: 0 auto;
background: url(pink_logo2.png) no-repeat;
z-index: 25;
}
ul.NoBulletNoIndent {
list-style-type: none;
margin-left: 0px;
padding-left: 0px
}
div#top_left {
height: 314px;
width: 221px;
background: url(images/left_top_corner_sm.png) no-repeat;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
}
div#bottom_left {
height: 175px;
width: 176px;
background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 5;
}
div#top_right{
height:174px;
width:174px;
background: url(images/right_top_corner_sm.png) top no-repeat;
position: fixed;
top:0px;
right: 0px;
z-index:5
}
div#bottom_right{
height: 602px;
width:198px;
background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 5
}
div#content {
margin: 40px 164px 0px 180px;
position: relative;
z-index: 1;
}
Hi All: When i use <ul><li> and <li> is set to "list-style-type: none;" IE and Firefox renders it differently. Does anybody know a work-around for this? The good example of this and the CSS code is at following holzgreen.com/list-test/ HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>List Test 1</title> <meta name="Description" content="x.x.x. CHANGE .x.x.x"> <meta name="KeyWords" content="x.x.x. CHANGE .x.x.x"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META name="Publisher" content="Firework Studio"> <META name="revisit-after" content="15 days"> <META name="robots" content="index, follow"> <META name="Robots" content="All"> <link href="000-style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style1 { font-family: "Courier New", Courier, monospace } --> </style> </head> <body> <div #none> <ol> <li>List item - 1</li> <li>List item - 2 <ol> <li>LI - 2.1</li> <li>LI - 2.2</li> </ol> </li> <li>List item - 3</li> <li>List item - 4</li> </ol> </div> </body> </html> CSS: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; border: 1px solid #000000; margin: 0em; padding: 0em; } #none ol { background: #BB0000; list-style-position: inside; margin: 0em; padding-left: 1em; /* Moves the Whole List */ } #none ol ol{ background: #BB00BB; list-style-position: inside; margin-left: 0em; padding-left: 3em; /* Moves the Nested List */ } #none ol li { background: #BBBB00; font-size: .8em; margin-left: 0em; list-style-type: none; } #none ol ol li { background: #00BBBB; font-size: 1em; list-style-type: lower-alpha; margin-left: 0em; list-style-type: none; } Thanks for your interest Hi! Should I do this? p { margin-top: 2em; margin-bottom: 2em; } or this: p { margin-bottom: 2em; } Same question for headers (h1, h2, etc) Thanks! Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}
.topform {
position: absolute;
right: 5px;
top: 65px;
width: 300px;
font-size: 10px;
font-family: myriad, verdana, sans-serif;
text-align: right; }
input, form {
font-size: 11px;
font-family: myriad, verdana, sans-serif;
margin-bottom: 0px;
margin: 0px; }
/* End of SEARCH Bar */
Which refers to this part of my index.php page: Code: <!-- Top right SEARCH -->
<div class="topform">
<div class="lb_bl">
<div class="lb_br">
<div class="lb_tl">
<div class="lb_tr">
<form name="form" id="form" method="post" action=""><input name="search" type="text" />
<input name="search" type="button" value="SEARCH" /></form>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- End of top right SEARCH -->
But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz |
|||||||