|
CSS - Css Pixel Issue Navigator/ie
Hi there,
I am back with another browser issue with css. When I set the position from the top on the center logo it shows correctly at top: 15px in IE but not in Navigator. To make it ok in Navigator I have to put it at 17px and then its off in IE. I would love some help as i have a similar problem occuring in another site which I have also been trying to solve. Here is the link: http://www.paintyourplace.com/emerald/ Here is the CSS: body{ font-family: verdana, helvetica, arial, sans-serif; margin: 0px 0px 0px 0px; padding: 0px; font-size:12px; color: black; background-color: #FFFFFF; scrollbar-arrow-color:#003366; scrollbar-face-color:#0C5331; scrollbar-shadow-color: #9FB304; scrollbar-highlight-color: #FFFFFF; scrollbar-track-color: #CCCCCC; } #menuList { margin: 0px; padding: 0px; } #menuList ul { margin: 0px; padding: 0px; } #menuList li { display: inline; list-style: none; } a.actuator { background-color: transparent; color: #000; font-size: 12px; margin: 0px; padding: 3px 6px; text-decoration: none; } a.actuator:hover { color: #990000; } .menu { color: #000; background-color: #EEE; border: 1px solid #CCC; position: absolute; visibility: hidden; } .menu li a { background-color: #EEE; color: #000; display: block; font-size: 12px; line-height: 1.75em; margin: 0px; padding: 0px 10px; text-decoration: none; } .menu li a:hover { background-color: #0C5331; color: #EEE; } span.key { text-decoration: underline; } #homeMenu { width: 120px; } #aboutMenu { width: 120px; } #productsMenu { width: 120px; } #careersMenu { width: 120px; } #customerMenu { width: 120px; } #healthcareMenu { width: 120px; } #contactMenu { width: 120px; } a{ color:#990000; font-weight:normal; text-decoration:none; } a:visited{ color:#005940 } a:hover{ color:#990000; text-decoration:underline; } #mainMenu { text-align: center; color: #000; margin: 0px; padding: 0px 0px 2px 20px; } DIV.jill_toplogo{ align: left; } DIV.jill_leftgreen{ top: 75px; background-color: #0C5331; height: 95px; position:absolute; width: 50%; } DIV.jill_rightblue{ left: 50%; top: 75px; background-color: #254E7C; height: 95px; position:absolute; width: 50%; } DIV.jill_centered_logo{ position:relative; text-align: center; top: 15px; } DIV.jill_greyback{ padding-top: 112px; background-color: #E1E5E0; position: absolute; top: 60px; width: 100%; text-align: center; font-size: 12px; } DIV.mainBox { position: absolute; top: 230px; font-family: verdana, helvetica, arial, sans-serif; font-size:12px; left: 57px; width: 80%; } #bottomText{ padding: 0px; margin-top: 20px; margin-bottom: 10px; margin-right: 20%; margin-left: 20%; background: none; border: none; border-top: none; text-align:center; font-family: verdana, arial, helvetica, sans-serif; font-size: 10px; color: #ccc; } THANKS!!!! Similar Tutorialsplease delete post...problem resolved. 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>
Hi everyone, I just have this pain with aligning the whole red thing to left of the page browser (cause it just keeps hanging on the center) - you can check my homepage below - you will see the problem - what should I do to move the whole thing to left? Thank you in advance. Hi I have been busy for a while with this one, but I am lost here. This is what I would have to accomplish. A footer divided in three parts, left - middle - right Left part has a few icons acting as buttons, have this working! Size is static at 50px width and needed height is 23px Middle part will have a horizontal list of links centered at the middle of the window, depending of the page#.html there could be 5 till 8 links be there. Those links are two or three words width. The right part contains two input fields, also working. width 110 px. Small!? yes but both need only to contain three and five characters. Also working, except that Firefox does a little strange with the field height. But that could be me ( of course its me ), and is for later. My main problem is to get the middle part always between the left and the right part, but at the same time the content centered from the window, and when the window get smaller that the two or three words of the links are wrapping down, and not that the most right link wraps under most left link. Also that the complete footer will grow in height as necessarily. I hope that I am clear with what I try. I did search and try but then again, I am lost. Also I did have golive 1.something and did buy golive CS. It looks like that the preview is garbage, you can't trust it. None of the browsers shows what golive shows. I have more complaints, but would like to know how other people feels about this app. Any way here is what I got so far. Code: ;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>untitled 2</title>
<style type="text/css" media="screen">
<!--
.colleft { background-color: green; vertical-align: middle; position: fixed; left: 0; bottom: 0; width: 50px; height: inherit; z-index: 2; margin-right: auto; margin-bottom: inherit; margin-left: 0; padding: inherit; }
.colmid{ background-color: orange; vertical-align: middle; position: fixed; left: 50px; right: 110px; bottom: 0; z-index: 2; margin-bottom: inherit; margin-left: auto; padding: inherit; }
.colright { background-color: fuchsia; vertical-align: bottom; position: fixed; right: 0; bottom: 0; width: 110px; height: inherit; z-index: 2; margin-right: 0; margin-bottom: 0; padding-right: 3px; padding-left: 3px; }
.footer { font-size: 12px; line-height: 95%; vertical-align: middle; position: fixed; left: 0; bottom: 0; width: 100%; height: 23px; z-index: 2; max-height: 40px; padding-right: 3px; padding-left: 3px; border-top: 3px ridge orange; display: block; }
.form { font-size: 11px; background-color: blue; position: fixed; right: 0; bottom: 0; width: 110px; height: 24px; z-index: 3; margin-bottom: 0; padding-right: 5px; padding-bottom: 0; border-color: yellow; }
.inputFld { font-size: 10px; background-color: yellow; position: fixed; right: 22px; bottom: 2px; width: 60px; height: 17px; z-index: 3; min-height: 18px; max-height: 16px; }
a { color: blue; font-size: 11px; font-weight: bold; line-height: 95%; text-align: center; width: auto; height: auto; z-index: 3; margin-top: auto; margin-bottom: auto; padding-right: 4px; padding-left: 4px; border: solid 1px olive; display: inline-table; }
table.main { position: relative; left: 0; right: 110px; bottom: 0; width: auto; height: 23px; z-index: 3; min-height: inherit; max-height: inherit; margin-right: auto; margin-left: auto; padding-right: 0; padding-left: 0; border: dashed 1px black; border-collapse: separate; border-spacing: 2px; }
tbody#tBody { width: auto; height: 23px; overflow:auto; border: dotted 1px blue; }
#tBody td { text-align: center; vertical-align: top; width: auto; height: auto; min-height: 23px; max-height: 40px; border: solid 1px red; }
--></style>
</head>
<body>
<div class="footer">
<div class="colleft">
<span class="threecol1">x1 x2 x3</span>
</div>
<div class="colmid">
<table class="main" cellspacing="0" cellpadding="0" >
<tbody id="tBody"> <tr>
<td> <a href="http://forums.devshed.com/" style="margin-left: 4px; margin-right: 4px; "> forums com</a></td>
<td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td>
<td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">devshed com</a></td>
<td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td>
<td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td>
<td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td>
</tr></tbody>
</table>
</div>
<div class="colright">
<a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a>
<form class="form" action="(EmptyReference!)" method="get" name="FormName">
<input class="inputFld" type="text" name="textfieldName" value="peek" size="4">
</form>
</div>
</div>
</body>
</html>
I have used some colors to show, myself where I am, so forgive me that, please. I think that the picture of the code will tell what I would like to create. BTW, My main goal was to use no table code and only f.e lists, but came and the same end. Hope that someone can help me. Thank you 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? 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 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. 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. 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 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, 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 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 Edit: Link removed... All the pages are the same... Whenever the column on the left ends, the text moves left a few pixels. Anyone know how to prevent this from happening? Thanks in advance! 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 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?? 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 Hey all. I'm just starting out in web design. To make things even more complicated, I'm using CSS for my first ever website. So I'm building this website from scratch, using online tutorials and such. But I'm running into a problem. On a PC, everything displays perfectly in IE and Firefox. But on a Mac, the nav bar is stretched with dead space after the last list item. This is the same in Safari, Firefox, and IE for Mac. Would you guys give it a look and maybe help me around the issue? What I'd like is no dead space after the last list item on any computer, (if you're looking on a PC, it appears correct) and I want a fixed width. Site CSS Thanks. I searched the forum before posting but didn't find anything. This is a fairly straight-forward problem, but it's one that I can't find a solution to. The site I'm working on is centered in the window. The body has a 3600x1 pixel background image repeating vertically that is also centered in the window. The layout of the site depends on this background being in the right place. In every browser I've tested so far, the site layout lines up perfectly with the background image, and all is good. But in Firefox 1.5 and Firefox 2.0 (both on Mac), the centered container div sits one pixel to the right of where it should be. Is this a known bug with Firefox? I'm including the code for the body tag and the container div, even though a quick glance will show that it's pretty standard stuff: Code: body {
font: 12px/1.5 "Lucida Grande", Helvetica, Arial, sans-serif;
color: #363636;
background: url(body_bg.gif) top center repeat-y white;
text-align: center;
}
#container {
margin: 0 auto;
width: 720px;
text-align: left;
}
Any help at all would be terrific. Thanks. Note: I changed the title of this post in the hopes someone will help me. Greetings, I am just starting CSS Design and am having a problem with my footer div background image moving 1 pixel to the right (messing up background image sync to above div) when the browser window is expanded to over 900pixels (which is min width of webpage) This happens in IE6/7 and not FF Any help would be great; http:// www. beavershanghai .com 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? |
|||||||