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

greenmike · #1 Jun 27th, 2006, 22:41

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 · #2 Jun 28th, 2006, 16:26

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

I hope one or both works for you

moojoo · #3 Jun 28th, 2006, 19:02

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 · #4 Jun 29th, 2006, 15:22

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 · #5 Jun 29th, 2006, 15:31

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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
XP/Vista differences in IE7	masonbarge	Web Page Design	1	Mar 30th, 2008 21:58
Image positioning and differences in IE/FF	0413	Web Page Design	33	Sep 25th, 2007 22:19
css IE/ firefox differences	jas4	Web Page Design	3	Aug 10th, 2007 05:40
What are the differences between different SSL providers?	gilman	ASP.NET Forum	0	Nov 30th, 2006 07:50
More View Differences	jakyra	Web Page Design	0	Mar 4th, 2004 17:16

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
What am i doing wrong - browser differences !!??