|
CSS - Margin 1px, But Ie Seems To Add An Extra Pixel!
Hi all,
Really strange problem with IE (as usual). I've done an English site with a typical left and main content structure, as you can see on: http://www.ntcjapan.com/index2.php The English site is left-aligned, and works fine. Now I'm doing an Arabic version and the site needs to be center aligned. Keeping things really simple, please see the following site: http://ntcjapan.com/languages/arabic/english.html The HTML: Code: <div id="container"> <div id="left"> <!-- NAVIGATION --> test right section </div> <div id="main"> test main section </div> <div class="spacer_small"> </div> </div> The CSS: Code:
#container {
margin: 0 auto;
text-align: left;
width: 764px;
background: url(../images/0_bg_center.gif) repeat-y;
min-height: 100%;
height: auto;
}
#main {
width: 590px;
padding-top: 115px;
padding-left: 9px;
background: url(../../../images/0_logo.gif) no-repeat;
float: left;
margin: 0px 0px 0px 1px;
}
/* Hack for IE, Reset to 100% height */
* html #container {
height: 100%;
}
/* End IE Hack */
#left {
width: 158px;
float: right;
}
Ok, you can ignore the height stuff because that works on the original English site. The problem is the width/margin on IE. The "left" section is actually now floating right, and is meant to be the navigation. The "container" section is 100% height and provides those background orange and grey vertical lines which I need. The "main" section has a margin-left of 1px, because I want it to be right next to the first orange line. On FIREFOX, this looks fine, you can see the background NTC logo actually touching the orange left line, hence we know it is using the margin-left: 1px correct. IE however, seems to add a bit of space and it looks as if I specified a margin-left: 2px for IE! Basically, in IE, the logo never 'touches' the orange line. This causes lots of problems when inserting content and trying to fit the exact width of the container, since IE seems to use one extra pixel than Firefox,and overflows if I try to use the exact width (764px) of the container. A demonstration of the problem on IE: http://ntcjapan.com/languages/arabic/ieprob.gif Any help, please?? Similar TutorialsA 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? 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 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 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 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 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>
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? 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;
}
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 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! Hi all Take a look at this in Firefox and then in IE7: http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't. Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem. I did a search and found this link: http://www.positioniseverything.net/explorer/floatIndent.html Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way? Thanks a lot for help :-) Josh Hello, I am trying to create a 1 pixel width <tr width="1" style="width: 1px;"><td rowspan="8" width="1" style="width: 1px;"> </td></tr> and a 1 pixel height <tr height="1" style="height: 1px;"><td colspan="8" height="1" style="height: 1px;"> </td></tr> But the following methods are not working, instead it is making them bigger than expected. How can I accomplish this?? Is there some sort of clear method in CSS that will clear the height and width and make sure to set it to 1 pixel?? Thanks I've made this layout: http://superq.dk/skjoldborg It works fine in Firefox, but IE somehow has moved the content one pixel to the left. This shows to the right at the menu, where there is one pixel whitespace, and at the end of the text, to the right, the white content box moves one pixel out in the shadows. Can someone give me an explanation on this? I've checked it all over, sizes on divs and so one, and I've come to the conclusion that IE has moved the content one pixel to the left, but why? OK, so I know what the problem is, but I can't figure out how to fix it. This is what I'm doing. I've got a floated div (left) and another div sitting to it's right. I'm using Nifty Corners to get that nice rounded finish (without using four images). But, here's the problem, the JavaScript is designed (I guess) to only cap the size of the div defined in the css file, so when IE 6.0 generously adds an extra 3px, what am I supposed to do? Ask Google. So, I found the Holly Hack at Position Is Everything but haven't been able to implement it correctly. I've been tinkering with this new layout for about a fortnight, but with no luck. I seek enlightenment, if there is anyone with the wisdom . . . ? Files included a another 1 = html nifty = JScript all = css This page design works in: Mac - Safari 2.0.1, Opera 8.5, Firefox 1.0.7 Win - Firefox 1.5, Opera 8.51 The JavaScript doesn't work at all in Internet Explorer 5.2 for Mac, but degrades the way I think it should. And back to Windows, IE 6.0, the "3px jog" is the only problem. All help appreciated. Hi, I'm trying to do a two column layout which spans across the whole screen. This would be easy if I was just using percentages because I could just go: Left: width:20%; Right: width:80%; But I need the left bar to be a fixed width and the right bar to span the rest of the screen. There might be something really simple here that I'm overlooking but at the minute I can't think of how I would do it... Joe I know this should probably be turend into pure css but for now I'm stuck with tables i have the following table structure Code: <table class="subitemtable"> <tr> <td class="subItem"> <a href="blah"> blah </a> </td> </tr> <tr> <td class="subItemOn"> <a href="blah"> blah </a> </td> </tr> <tr> <td class="subItem"> <a href="blah"> blah </a> </td> </tr> </table> using the following css styles Code:
.subItemTable{
width:100%;
border-collapse: collapse;
margin:0px;
padding:0px;
}
.subItem{
margin:0px;
border-bottom: 1px solid #0E59AE;
border-right: 1px solid #0E59AE;
background-color:#e8e8e8;
padding: 3px 0px 3px 20px;
width:100%;
}
.subItem a{
font-size: 9.5pt;
color: #666666;
}
.subItem a:link,.subItem a:visited{
text-decoration:none;
}
.subItem a:hover{
text-decoration:underline;
}
.subItemOn{
margin:0px;
border-right: 1px solid #fff;
border-bottom: 1px solid #0E59AE;
background-color:#ffffff;
padding: 3px 0px 3px 20px;
width:100%;
}
.subItemOn a{
font-size: 9.5pt;
color: #666666;
}
.subItemOn a:link,.subItemOn a:visited{
text-decoration:none;
}
.subItemOn a:hover{
text-decoration:underline;
}
my problem is after the first cell the bottom right most pixel of the border is just missing. This happens in firefox and IE ..The attached picture should show what I'm talking about. Thanks for your help Hello, I am developing a site for a client and originally I had the template stretching 100% height in the browser which worked for both IE and FF. The problem now is that I have integrated a shopping cart into the template and because of the system of the cart, it breaks the 100% rule of height. So now I have began to use the idea of creating a -y tiling centered bg image. The problem is that when I align the image to meet the edges of the template, the alignment is different between IE and FF by 1 pixel!!! Its so frustrating! Has anyone run across this issue before? I ran a quick search for this in google but didnt find anything helpful, only things with regular images. If anyone has a solution for this, it would be great! Thanks! Rproctor The site http://glish.com/css/7.asp is showing me how to make tabls in css. I get it but their example which has a workour I don't get doesn;t work either.... look at the top right corner. I'm trying to learn but how can you with erroneous code? The code is all exposed on their page in the scroll down bit down the page a bit. Hey-- Working on a new site, I've got 99.9% of it finished and working, but a menu is displaying one pixel higher in Safari (Mac and PC) than any other browser. www.inkyfever.com/customer/animotion/ The menu is in the orange bar at the top. It's created with an unordered list. You can view source to check the code. HELP! EDIT: Okay, I've got it to mostly work by changing some padding, but hovering over any other orange links, the hover color doesn't quite fill the space vertially. ONE pixel short at the bottom. Ideas? :grimey Hello, Code: <table border="1"> <tr> <td class="norightborder"> Two cells, </td> <td class="noleftborder"> but no borders between them. </td> </tr> </table> Code: .noleftborder {
border-left-style: none;
}
.norightborder {
border-right-style: none;
}
I notice a pixel gap between the two cells and it's annoying me. How do I get rid of it? Thanks Rogier |
|||||||