What am i doing wrong - browser differences !!??

greenmike · June 27th, 2006, 05:41 PM

What am i doing wrong ??

Here is a screen dump from IE7

...and here is the desired layout with Firefox

I am using the same CSS & HTML code as below

<%@ Control Language="c#" AutoEventWireup="false" Inherits="AspDotNetStorefront.TemplateBase" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<%@ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>(!METATITLE!)</title>
(!CURRENCY_LOCALE_ROBOTS_TAG!)
<meta name="description" content="(!METADESCRIPTION!)">
<meta name="keywords" content="(!METAKEYWORDS!)">
<script type="text/javascript" src="jscripts/formValidate.js"></script>
<style type="text/css" media="screen">

</style>
</head>
<body>








<div id="commonwrapper">
<div id="common">
<div id="shopheader"><img src="images/logo.gif" alt="home" width="150" height="63" align="left" />
<div id="shopheaderoptions"><a href="#"><img src="images/sample_accounts.gif" alt="my account" width="38" height="46" hspace="4" vspace="0" border="0" /></a><a href="#"><img src="images/sample_basket.gif" alt="view basket" width="37" height="46" hspace="4" border="0" /></a><a href="#"><img src="images/sample_help.gif" alt="help & information" width="38" height="46" hspace="4" border="0" /></a></div>
</div>
<div id="tabsG">
<ul>
<li><a href="#" title="Link 1"><span>Home</span></a></li>
<li><a href="#" title="Link 2"><span>Regalia</span></a></li>
<li><a href="#" title="Link 3"><span>Books & CD</span></a></li>
<li><a href="#" title="Link 4"><span>Cases</span></a></li>
<li><a href="#" title="Link 5"><span>Jewellery</span></a></li>
<li><a href="#" title="Link 6"><span>Clothing</span></a></li>
<li><a href="#" title="Link 7"><span>Furnishings</span></a></li>
<li><a href="#" title="Link 8"><span>Gifts</span></a></li>
<li><a href="#" title="Link 9"><span>Accessories</span></a></li>
<li><a href="#" title="Link 10"><span>Offers</span></a></li>
<li><a href="#" title="Link 10"><span>Community</span></a></li>
</ul>
</div>
<div id="minibasket">(!USERNAME!)  <a href="(!SIGNINOUT_LINK!)">(!SIGNINOUT_TEXT!)</a>  <br/>
You have (!NUM_CART_ITEMS!) item(s) in your <a href="shoppingcart.aspx">(!CARTPROMPT!)</a>  </div>
<div id="homepagesearch">
<form id="two" name="two" method="post" action="#">Search for: <input name="search" type="text" size="25" />
in: <select name="catergories">
<option>All Categories</option>
<option>Regalia</option>
<option>Books & CD</option>
<option>Cases</option>
<option>Jewellery</option>
<option>Clothing</option>
<option>Furnishings</option>
<option>Gifts</option>
<option>Accessories</option>
<option>Offers</option>
</select>
<label>
<input type="button" name="submit" value="Search" class="btn"/>
</label><br />
<a href="#">Advanced Search</a>
</form>
</div>

<div id="shopcontent">
<div align="left">
<span class="SectionTitleText">Now In: (!SECTION_TITLE!)</span>
</div>
<br/>
<asp

laceholder id="PageContent" runat="server"></asp

laceholder>
</div>

<div id="footer"><div id="divide"></div>
<a href="default.aspx">Home</a> | <a href="t-contact.aspx" > Contact Us</a> | <a href="t-affiliate.aspx" >Affiliates</a> | <a href="t-returns.aspx" > Return Policy</a> | <a href="t-privacy.aspx" >Privacy Policy</a> | <a href="t-security.aspx" >Security Policy</a> | <a href="sitemap2.aspx" > Site Map</a> | <a href="t-copyright.aspx">Copyright © 1995-2006. All Rights Reserved.</a></div>

</div></div>
</body>
</html>

/* CSS Document */

BODY
{
margin: 0px 0px 50px 0px;
color: #000000;
font-family: Tahoma, Arial, Helvetica;
background-color: #ADD8E6;
font-size

-small;
text-align: center
}
#commonwrapper
{
width: 950px;
margin-left: auto;
margin-right: auto;
text-align:left
}
#common
{
margin-top: 0px;
border-top: solid 6px #1E90FF;
background-color: #ffffff;
width: auto;
}
#shopheader
{
width: 100%;
padding: 15px 15px 15px 15px;
height: 60px;
}
#shopheaderoptions
{
float:right;
width: 200px;
height:65px;
padding-top:7px
}
/*- Menu Tabs --------------------------- */
#tabsG
{
float:left;
width:100%;
background:#666;
font-size:93%;
line-height:normal;
}
#tabsG ul
{
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsG li
{
display:inline;
margin:0;
padding:0;
}
#tabsG a
{
float:left;
background:url(images/tableftG.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsG a span
{
float:left;
display:block;
background:url(images/tabrightG.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsG a span {float:none;}
/* End IE5-Mac hack */
#tabsG a:hover span
{
color:#FFF;
}
#tabsG a:hover
{
background-position:0% -42px;
}
#tabsG a:hover span {
background-position:100% -42px;
}
#tabsG a:link {
color: #000000;
text-decoration: none;
font-size: 12px;
}
#tabsG a:visited {
text-decoration: none;
color: #000000;
font-size: 12px;
}
#tabsG a:hover {
text-decoration: none;
color: #666666;
font-size: 12px;
}
#tabsG a:active {
text-decoration: none;
font-size: 12px;
}
#minibasket
{
float:left;
width:200px;
height:67px;
background-color:#1E90FF;
padding:15px 7px 7px 7px;
text-align:center;
clear:both;
font-size:130%
}
#homepagesearch
{
float:right;
width:722px;
height:75px;
background-color:#FF6600;
padding:7px;
background-image:url(images/search.gif);
background-position:right;
background-repeat:no-repeat;
font-size:130%
}
#shopcontent {
width:900px;
background-color:#FFFFFF;
padding:10px;
clear:both;
}
#divide {
CLEAR: both;
MARGIN: 0px 0px 15px 0px;
WIDTH: 100%;
HEIGHT: 6px;
BACKGROUND-COLOR: #1E90FF;
line-height:0px;
}
#footer
{
width: 100%;
padding: 15px 0px 15px 0px;
text-align:center;
font-size:100%;
}
a:link {
color: #000000;
text-decoration: none;
font-size: 100%;
}
a:visited {
text-decoration: none;
color: #000000;
font-size: 100%;
}
a:hover {
text-decoration: none;
color: #666666;
font-size: 100%;
}
a:active {
text-decoration: none;
font-size: 100%;
}
/* search form css */
.form {
display: inline;
}
form#two {
padding:20px;
}
form#two select {margin:0px 0px 0px 0px;}
form#two option {background:#fff; color:#1E90FF;}
input.btn{
width:80px;
height:21px;
margin-left:5px;
color:#ffffff;
font-size:100%;
font-weight:bold;
background-color:#1E90FF;
border:1px solid;
border-top-color:#999;
border-left-color:#999;
border-right-color:#333;
border-bottom-color:#333;
}

any help would be appreciated

Mike

masonbarge · June 28th, 2006, 11:26 AM

Try:
display: block; for the blue box
padding: 0 7px; for the orange box

I hope one or both works for you

moojoo · June 28th, 2006, 02:02 PM

The IE Box Model

http://css.maxdesign.com.au/listamat...t-boxmodel.htm

Also you can use an IE Hack such as * html #foo {} so use the same style but only IE pre 7 will read that. Alternately if you declare the same style twice, IE will read the first and moz, ff, etc will always use the second one. Welcome to the suck that is Internet Exploder. Also if you have a height specified on the orange block you coul dtry setting overflow:hidden; that seems to do wonders for IE and adding extra padding etc.

minute44 · June 29th, 2006, 10:22 AM

ummm, font-size:100%??????

That's not right surely....

But that's a different issue....

Yeah, display:block will more than likely help you out here.

moojoo · June 29th, 2006, 10:31 AM

Font size should be in em really. % and pixel values eh... It is all about scalablity. Your layout should function regardless of the font size.