|
CSS - Images Missing Bottom Pixels In Ie
Not sure if this is really a CSS problem but...
In IE only, the bottom pixels are missing from some images. It's fine in Firefox though: Example The images in quesiton are the Zodiac and 13 Moon images (underneath the avatar). Anyone know what might cause this? Thanks, Similar TutorialsIs there a size difference between css pixels and html width pixels? The question I ask is because I am using the embed code from flickr and vimeo`s width of 220 and the search input bar in css is set to 220px, but when viewed through a browser they have different lengths. Is there a solution for making it the same length? Hi everyone! I am having a problem with some missing colours and images in firefox. I have validated my XHTML 1.0 and CSS as OK. It looks correct in IE 6.0 but not in FF, i am sure someone will know the answer straight away! address is http://www.wellandpower.net charlie Sitewide, I have a bottom border affect, rather than an underline for links. But it applies itself to linked images as well. I have borders shut off on images, but that doesn't stop it from applying the border. I've tried img border:none; and a few other tricks, but it only does the trick in Chrome. CODE: a { text-decoration: none; } a:hover { text-decoration: none; border-bottom-width: 1px; border-bottom-style: solid; padding-bottom: 2px; } img { border-width: 0px; } img a { border-width: 0px; } img a:hover { border-width: 0px; } In the main page here, there look to be 2 columns. How can I align all the smaller images with the bottom of the big image? Sometimes there are 3 photos, sometimes there are 6. At the moment it looks like it is all in divs. Is there a way to do it in CSS with the current code. The HTML looks a bit messy: http://www.truly organic foods.com/cashew-cacao-cluster-275g.php I use the following CSS for my links, and use a border-bottom to give them a dashed underline... Code: a {
color: #AC4870;
border-bottom: 1px dashed #DDDDDD;
text-decoration: none;
}
a:hover {
color: #DDDDDD;
border-bottom: 1px dashed #AC4870;
text-decoration: none;
}
This underline also shows up under my images that are used as links. How would you write CSS that would remove this dashed border-bottom from my image links? Thanks I'm working on a site where I want to layer grass along the bottom of the page, but slightly over the bottom of an image that's being used as a footer for a table. I'm new to CSS and any help would be greatly appreciated. Here's the code I'm using: <style type="text/css"> <!-- body { background-image: url(images/polkasky.jpg); background-attachment: fixed; } .greentable { background-image: url(images/cloud-back.png); vertical-align: text-top; } .cloudfoot { background-image: url(images/cloudbottom.png); background-attachment: fixed; display: block; margin-left: auto; margin-right: auto; background-repeat: no-repeat; } #Layer1 { width:100%; height:158px; background-image: urlimages/grass.gif); background-repeat: repeat-x; background-position: bottom center; background-attachment: scroll; } --> </style> <script type="text/JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('images/cloud-head-tongue.png')"> <table width="850" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><div align="center"><img src="images/anchors.png" width="650" height="25" /></div></td> </tr> </table> <div align="center"><img src="images/cloud-head-pink.png" name="Image1" width="1000" height="220" border="0" align="center" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="229,47,827,214" href="pages/spunkymonkey.htm" onmouseover="MM_swapImage('Image1','','images/cloud-head-tongue.png',1)" onmouseout="MM_swapImgRestore()" /> </map> </div> <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="greentable"> <tr> <td> <table width="850" border="0" align="center" cellpadding="0" cellspacing="10"> <tr> <td> <div align="center"> <script language="php">include ("$Home_Path/$Inc_Dir/pagelist_horizontal.php");</script></div></td> <td><script language="php">include ("$Home_Path/$Inc_Dir/search_catalog.php");</script></td> </tr> </table> </td> </tr> </table> <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="greentable"> <tr> <td> <table width="850" border="0" align="center" cellspacing="10" bgcolor="#FFFFFF"> <tr> <td width="636" valign="top"> <div align="center"> <script language="php">include ("$Home_Path/$Inc_Dir/title.php");</script> </div> <div align="left"> <script language="php">include("$Home_Path/$Inc_Dir/content.php");</script></div></td> <td width="180" valign="top"><div align="left">Newsletter Signup, Coupon, Etc Here</div></td> </tr> </table> </td> </tr> </table> <img src="images/cloudbottom.png" width="1000" height="145" class="cloudfoot" /> <div id="Layer1"></div> </body> </html> Hi guys. If you look at this link he http://www.geocities.com/jezman2002/index.html You will see that the space between the first link 'Company Profile' and the second link is bigger than the others. This ok until u click on the link 'Case Studies' .. you'll see that the two pixels are evident and the indicator GIF next to the link is higher than I desire. This is not the case for Mozilla, Netscape .. EVEN OPERA !!! But IE just doesn;t like it? Do you have any suggestions as to what is causing this, so i can avoid it in future ? Thanks. Hello. I have this page, and it has been working well so far with the image and table. http://www.pixelrev.net/web/ However, as you may notice, in Firefox (haven't tried in IE yet) the right column TD is one pixel above and below the image on the left. I need it to match up exactly. Can anyone fix up my code, and repost it here so it will work? Thanks. this is bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things) So I have 3 images for the top of my page and 3 images for the bottom. The page is enclosed in a div frame titled "frame" each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe" Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom. Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame" I've tried some code in here to do it and it doesn't work.. any help here? thanks! Code:
<style type="text/css">
body {
text-align:center;
height:100%;
min-height:100%;
padding:0px;
}
#frame {
width:800px;
height:100%;
min-height:100%;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
position:relative;
}
#contentlefttop {
width:155px;
height:282px;
padding:0px;
float:left;
background-image: url(images/layout_01.gif);
background-repeat:no-repeat;
}
#leftframe {
float:left;
width:155px;
position:relative;
height:100%;
min-height:100%;
}
#contentleft {
clear:left;
float:left;
padding:0px;
width:155px;
padding-bottom:270px;
}
#contentleftbottom{
width:155px;
height:270px;
/*clear:left;
float:left;*/
padding:0px;
position:absolute;
bottom:0;
background-image: url(images/layout_07.gif);
background-repeat:no-repeat;
}
#contentcenter {
width:486px;
padding:0px;
clear:left;
float:left;
text-align:center;
min-height:100%;
height:100%;
padding-bottom:53px;
}
#rightframe {
float:left;
position:relative;
height:100%;
min-height:100%;
width:159px;
}
#centerframe {
float:left;
position:relative;
height:100%;
width:486px;
}
#contentrighttop {
width:159px;
height:282px;
padding:0px;
clear:left;
float:left;
background-image:url(images/layout_03.gif);
background-repeat:no-repeat;
background-position:top;
}
#contentright {
clear:left;
float:left;
width:159px;
padding:0px;
height:100%;
padding-bottom:270px;
}
#contentrightbottom{
width:159px;
height:270px;
/*clear:left;
float:left;*/
position:absolute;
bottom:0;
padding:0px;
background-image: url(images/layout_08.gif);
background-repeat:no-repeat;
background-position:bottom;
}
#contentheader {
width:486px;
height:135px;
float:left;
background-image: url(images/layout_02.gif);
background-repeat:no-repeat;
}
#contentfooter {
/*clear:left;
float:left;*/
width:486px;
height:53px;
background-image: url(images/layout_09.gif);
background-repeat:no-repeat;
position:absolute;
bottom:0;
}
#sitemessage {
margin-left:17px;
margin-right:31px;
height:90px;
text-align:center;
font-size:12px;
}
#wisemanquote {
margin-left:22px;
margin-right:24px;
height:85px;
text-align:center;
font-size:12px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<div id="frame">
<div id="leftframe">
<div id="contentlefttop">
<div id="sitemessage"></div>
</div>
<div id="contentleft">Left</div>
<div id="contentleftbottom"></div>
</div>
<div id="centerframe">
<div id="contentheader"></div>
<div id="contentcenter">
<p>Center</p>
</div>
<div id="contentfooter"></div>
</div>
<div id="rightframe">
<div id="contentrighttop">
<div id="wisemanquote"></div>
</div>
<div id="contentright">Right</div>
<div id="contentrightbottom"></div>
</div>
</div>
Alright here goes. I just redesigned my website. To see how it *SHOULD* display, use Mozilla, Safari, etc... Use Internet Explorer on Windows to see how it displays incorrectly. The first way that I wanted to do it was to have everything either float: left; or float: right; and then use relative positioning on the left menu to bump it left. The problem with this is that Internet Explorer didn't want to do that and since I'm designing with every internet user in mind, I must make everything viewable for eve I assume that the problem lies with the stylesheet in these two sections... Code: #menu {
position: absolute;
top: 115px;
left: 145px;
width: 50px;
padding-right: 0px;
padding-top: 0px;
text-align: left;
font-family: LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
margin-top: 0px;
voice-family: "\"}\"";
voice-family: inherit;
z-index: 200;
}
a.tab, a.tab:link {
background-color: #222222;
border: 1px solid #EFEFEF;
padding: 12px 0em 12px 10px;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
float: left;
width: 95px;
margin: 5px 0px 5px 0px;
text-decoration: none;
}
a.tab:visited {
color: #FFFFFF;
}
a.tab:hover {
background-color: #666666;
color: #FFFFFF;
}
a.tab:active {
color: #FFFFFF;
}
a.tab.activeTab, a.activeTab:link {
border-right-width: 0px;
width: 100px;
background-color: #000000;
}
and Code: .rightContent {
float: right;
width: 535px;
background-color: #000000;
border: 1px solid #EFEFEF;
margin-left: 0px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 5px;
text-align: center;
color: #FFFFFF;
}
The (X)HTML for this section looks like this... Code: <div id="menu"> <a class="tab activeTab" href="http://www.paularms.com">Home</a><br /> <a class="tab" href="http://www.paularms.com/archives.html">Archives</a><br /> <a class="tab" href="http://www.paularms.com/about/downloads.html">Downloads</a><br /> <a class="tab" href="http://www.paularms.com/about/tutorials.html">Tutorials</a><br /> <a class="tab" href="http://www.paularms.com/about/index.html">About</a><br /> </div> <div id="content"> <div class="rightContent"> .......... Does anyone know WHY Internet Explorer is displaying this wrong? Even more helpful would be HOW to fix the problem. Thanks everyone. im trying to fix my website layout to show up the same in IE and firefox. right now the demensions are fine in firefox. in IE they show up to be too big http://mrsako.gotdns.com/index.php i made a class for the TD on the left (where the green part is as you can see in FF. im pretty sure the whole problem involves that im trying to set a certain width to a TD instead of a Table. heres the CSS Code:
A:link{color:#ADD8E6;text-decoration:underline}
A:visited{color:#ADD8E6;text-decoration:underline}
A:active{color:#ADD8E6;text-decoration:underline}
A:hover{color:#ADD8E6;text-decoration:underline}
#mastertable {max-width: 1024px;}
#max800{max-width: 800px}
#max750{max-width: 750px}
#max500{max-width: 500px}
#max400{max-width: 400px}
TD{text-align: left; }
#tLeft{text-align:left; vertical-align:top;}
.right{text-align: right;}
textarea, submit{background-color:#19665a;}
table.nounderline a, table.nounderline a:link, table.nounderline a:visited, table.nounderline a:active, table.nounderline a:hover {
text-decoration:underline
}
table.trhover tr:hover {
background-color:#0b5b4e;
}
.container{
border-style: none;
border-width: thin;
padding:0;
max-width:1024px;
width: expression(document.body.clientWidth > 1024 ? "1024" : "auto" );
}
.PlainTable{
border-style: none;
padding:0;
}
.topbarTD{
border-style: none;
border-width: thin;
padding:0;
height:187px;
max-width:1024px;
width: expression(document.body.clientWidth > 1024 ? "1024" : "auto" );
background-image:url("images/2newbanner.gif");
background-repeat: no-repeat;
text-align:right;
vertical-align:bottom;
}
.innertopbarTD{
border-style: none;
border-width: thin;
padding:0;
width:290px;
height:24px;
background-image:url("images/fluidgoldline.gif");
background-repeat: no-repeat;
text-align:right;
vertical-align:top;
}
.LeftSideLinks{
border-style: none;
border-width: thin;
padding:0;
width:159px;
width: expression(document.body.clientWidth < 159 ? "159" : "auto" );
height:474px;
background-image:url("images/space.gif");
background-repeat: repeat-y;
text-align:right;
vertical-align:top;
}
.TopPageSpace{
border-style: none;
border-width: thin;
padding:0;
width:865px;
width: expression(document.body.clientWidth > 865 ? "865" : "auto" );
height:99px;
background-image:url("images/toppagespace.gif");
background-repeat: no-repeat;
text-align:right;
vertical-align:top;
}
.ExtraPageSpace{
border-style: none;
border-width: thin;
padding:0;
width:865px;
height:99px;
background-image:url("images/miniextrapagespace.gif");
background-repeat: repeat-y;
text-align:left;
vertical-align:top;
}
.BottomBorder{
border-style: none;
border-width: thin;
padding:0;
height:107px;
max-width:1024px;
width: expression(document.body.clientWidth > 1024 ? "1024" : "auto" );
background-image:url("images/bottomborder.gif");
background-repeat: no-repeat;
text-align:center;
vertical-align:top;
}
heres the html Code:
<table height="768" class="container" cellspacing="0" summary="Foo dot Com">
<tr>
<td class="topbarTD" colspan="2"><table class="innertopbarTD" cellspacing="0" align="right"><tr><td class="right">Please <a href="login.php" title="Login">Login</a> or <a href="register.php" title="Sign-Up">Sign-up</a><font size="2" color="red">    </font> </td></tr></table></td>
</tr>
<tr>
<td class="LeftSideLinks" rowspan="2" align="right">i thoguht i saw a putty cat i thought i saw a***** cat</td>
<td class="TopPageSpace"><font size="26"></font><img src="images/fluidtoppage.gif" height="99"></td>
</tr>
<tr>
<td class="ExtraPageSpace">
<div style="text-align:center;">
<h2>Foo.com<br>
Game Servers and VOIP Servers<br>
admin@foo.com</h2>
</div>
</td>
</tr>
<tr>
<td class="BottomBorder" colspan="2">
<table border="0" height="107" summary="Navigational Links">
<tr><td width="159"><!-- side -- ></td>
<td width="865"><center>
<br><a href="index.php" title="Home">Home</a> - <a href="services.php" title="Services">Services</a> - <a href="contact.php" title="Contact">Contact</a> -
<a href="login.php" title="Login">Login</a><br>
<a href="faq.php" title="Frequently Asked Questions">FAQ</a> - <a href="termsofservice.php" title="Terms and Conditions, Acceptable Use Policy, Legal Information">Terms and Conditions</a><br>
Copyright © 2006 Foo. All Rights Reserved<br>
<small>All logos and images are the trademarks of their respective owners.</small>
</center>
</td></tr></table>
</td>
</tr>
</table>
i know theres some table tags which i havent taken out yet, im in the process of trying to convert everything i can to CSS edit: i forgot to mention my problem the left side green bar is supopsed to be 159px wide. in firefox it shows the correct width, byt in IE it thinks 159px is almost double that Hi, I am new here, asked this question at another forum and never got an answer so I hope someone here can help. "Is there any way to remove 200px from the bottom of my site and keep the same layout using divs? I had to give the wide div next to the thin one a top: -208px to get it to line up with the thin one. and then I had to bring up the copyright one the same way so it lined up under them. Now I am stuck with an extra 200px under them (really it's 208, but I want an 8px space at the bottom)." Site: http://www.kendallstudios.com/index2.php CSS File: http://www.kendallstudios.com/styles/standard.css http://www.richarddoyle.net/tests/float is what I'm currently working on, trying to get a basic layout together. I'm pretty close to what I want, except you'll notice the white box is touching the nav area. I want about 20 pixels of space between the two, and the background gray to show through. They're touching because I'm currently only floating one element, but if I float both the content goes below the nav in Firefox. I tried not floating anything and using relative positioning to move the content up and into place, but of course that causes the page to be much longer because it still takes up the area the content would have taken up. I'm guessing how I'm structuring my code is flawed. Help! Hi guys, I'm pretty new to CSS. I had this style sheet set up, and it was working in Firefox just fine. When I tested it on IE, the center logo instead of being approximately 15 pixels down from the top, it's right at the top. I was able to get those 15 pixels to appear in IE with 2 changes, but now there is an extra 15 pixels in Firefox, so it is down approx. 30 pixels. Can anybody see what I'm doing wrong, or provide a hack that will fix it? css Code: Original - css Code /* This CSS works in FF. I have put the changes in comments that will make it work in IE. Both changes were in the Header section. */ body { margin:0px; margin-bottom:50px; padding:0px; text-align:center; background-image:url(../images/bg-grn2.gif); } a:link {color:#0000EF;} a:active {color:#EF0000;} a:visited {color:#52188C;} div#FS-Logo { position:absolute; top:10px; left:10px; height:110px; width:100px; background:url(../images/left-logo.gif) top left no-repeat; margin:10px; padding:0; } div#FWS-Logo { position:absolute; top:10px; right:10px; height:110px; width:100px; background:url(../images/right-logo.gif) top right no-repeat; margin:10px; padding:0; } div#Header { width:300px; height:140px; /*change this to 155px*/ margin:0px auto; text-align:center; font-family:"Trebuchet MS", serif; background:url(../images/center-logo.gif) no-repeat top center;/*change this to 'no-repeat center center'*/ } div#Main-content { width:55%; height:500px; margin:0px auto; text-align:left; padding:0px; border:1px dashed #333; background-color:#ded794; font-family:verdana, sans serif; font-size:12px; } div#Left-column { position:absolute; top:155px; left:15px; width:15%; height:500px; margin:0; text-align:left; border:1px dashed #333; background-color:#ded794; font-family:verdana, sans serif; font-size:12px; } div#Right-column { position:absolute; top:155px; right:15px; width:15%; height:500px; margin:0; text-align:left; border:1px dashed #333; background-color:#ded794; font-family:verdana, sans serif; font-size:12px; } div#Footer { position:static; bottom:10px; right:15px; width:100%; margin:0; padding:0; text-align:center; font-family:verdana, sans serif; font-size:14px; } .hd-header {color:#8A4B2C;} .hd-footer {color:#000000;} .hd-main {color:#FFFFFF;} /* This CSS works in FF. I have put the changes in comments that will make it work in IE. Both changes were in the Header section. */ My html page is this. html Code: Original - html Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="styles/decaid.css"> </head> <body> <div id="FS-Logo"> <p> </p> </div> <div id="Header"> <p> </p> </div> <div id="FWS-Logo"> <p> </p> </div> <div id="Left-column"> <p>Main Links Will be here</p> </div> <div id="Main-content"> <p class="hd-main">Main content is here.</p> </div> <div id="Right-column"> <p>External Links here</p> </div> <div id="Footer"> <p class="hd-footer">Footer goes here</p> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="styles/decaid.css"> </head> <body> <div id="FS-Logo"> <p> </p> </div> <div id="Header"> <p> </p> </div> <div id="FWS-Logo"> <p> </p> </div> <div id="Left-column"> <p>Main Links Will be here</p> </div> <div id="Main-content"> <p class="hd-main">Main content is here.</p> </div> <div id="Right-column"> <p>External Links here</p> </div> <div id="Footer"> <p class="hd-footer">Footer goes here</p> </div> </body> </html> Hi all, I am trying to convert my font info as global.css instead of hard coding it in every file. Code:
<font size="2" face="Arial, Helvetica, sans-serif">text</font>
to
.myFont {
font-size:14px; FONT-FAMILY: Arial, Helvetica, sans-serif;
}
But is not coming out the same in ie, why? Any help would be greatly appreciated. I've had a look at the CSS for this website onerailway .com but cannot seem to find out how the width of the entire site is defined. If you are using any screen res upto 1024x768 its 100% of the browser (assuming its not windowed) but then go over 1024x768 and it limits its self to around 1000 px wide. This is the sheet it appears to be using Many thanks if anyone can point me in the correct way for finding out how to do this Hello, is it possible to start a border-left css 1 or 2 pixels from the left of the element instead of it going to the far left of the element?? Hello. I've been playing with css for about a week now and after tearing my hair out and calling it a stupid language a number of times, have eventually solved all my problems. However todays problem I thought I'd ask about. There are 3 or 4 white pixels at the corners of my css image changing navigation buttons that I didn't put there. They don't show up when viewed in photoshop or when I use Javascript rollovers. I can't find any help anywhere else either. Hi there developers! im new here and desperately trying to be resonable at developing myself! i basically have an issue with my css, which is causing one of my drop down menus to appear slightly to the right in internet explorer - it looks spot on in firefox. i've googled this soooo much and heard about the 5 pixels problem between any browser and ie, but i cannot seem to fix it with all my changes made. see image - highlighted in red! Code: URL can anyone help me tidy this mess up please? this has taken me so long, because i wanted the locations of the drop downs to stay exactly in proportion when people zoom in and out of their browsers. html code: <div id="columnSubTop"> <div class="submenudropdown"> <div class="floatLeft width25 padL300 padTOP25"> <form action="search_for_vouchers_by_town" method="post" name="search" id="search"> <select name="fldCountyID"> <option value="">Please Select</option> <% While (NOT CountyList.EOF) %> <option value="<%=(CountyList.Fields.Item("fldCountyID").Value)%>"><%=(CountyList.Fields.Item("fldCountyName").Value)%></option> <% CountyList.MoveNext() Wend If (CountyList.CursorType > 0) Then CountyList.MoveFirst Else CountyList.Requery End If %></select> </div> <div class="floatRight width25 padR10 padTOP25"> <select name="fldTownID"> <% While (NOT TownList.EOF) %> <option value="<%=(TownList.Fields.Item("fldTownID").Value)%>"><%=(TownList.Fields.Item("fldTownName").Value)%></option> <% TownList.MoveNext() Wend If (TownList.CursorType > 0) Then TownList.MoveFirst Else TownList.Requery End If %></select> </div> </div> <div class="submenubutton"> <input type="image" src="images/search_button.gif" alt="Submit button" /> </form> </div> </div> CSS code: #columnSubTop { height: 85px; width:940px; margin: 0 auto; float:left; background-image:url(../images/css/subheader.gif); background-position: top left; background-repeat: no-repeat; clear:none; } .submenudropdown{ float:left; width:750px; } .submenubutton{ float:right; margin:0 auto; padding:24px 62px 0 0; } he http://www.cycloid.f9.co.uk/basic.gif is my problem he http://www.cycloid.f9.co.uk/basic.htm http://www.cycloid.f9.co.uk/basic.css is the htm/css with the rest of the garbage (forms etc) taken out the browsers shown are IE6,FF1,NS7 and opera (though i cant remember the version, all have been updated in the past month though as this is a new computer!) i know this is nit picking but the heading sizes are different accross the browsers, and some appear to have padding too. the rest of my elements seem to size/margin/stack the same but not the H tags. anyone got any suggestions how to get them to listen to my rules! or could it be a case of rounding errors in each browser's calculations once the font sizes get particularly large? or do i have to <div class='h1'>heading</div> instead!? anyway, i personally am not bothered about things being pixel perfect alas it's not a perfect world and simply getting things to line up how im asked to at work and getting paid at the end of the month is more important to me than doing it all in em's! cyc |
|||||||