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

This is a discussion on "What am i doing wrong - browser differences !!??" within the Web Page Design section. This forum, and the thread "What am i doing wrong - browser differences !!?? are both part of the Design Your Website category.


 Subscribe in a reader

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

Notices
Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.




Reply
 
LinkBack Thread Tools
  #1  
Old Jun 27th, 2006, 21:41
New Member
Join Date: Jun 2006
Location: UK
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
What am i doing wrong - browser differences !!??
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">
<!--
@import url("skins/Skin_(!SKINID!)/common.css");
-->
</style>
</head>
<body>
<!-- PAGE INVOCATION: '(!INVOCATION!)' -->
<!-- PAGE REFERRER: '(!REFERRER!)' -->
<!-- CUSTOMER ID: '(!CUSTOMERID!)' -->
<!-- STORE LOCALE: '(!STORELOCALE!)' -->
<!-- CUSTOMER LOCALE: '(!CUSTOMERLOCALE!)' -->
<!-- STORE VERSION: '(!STORE_VERSION!)' -->
<!-- CACHE MENUS: '(!AppConfig name="CacheMenus"!)' -->
<!--open page wrapper -->
<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 &amp; 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!)&nbsp;&nbsp;<a href="(!SIGNINOUT_LINK!)">(!SIGNINOUT_TEXT!)</a>&nbsp;&nbsp;<br/>
You have (!NUM_CART_ITEMS!) item(s) in your <a href="shoppingcart.aspx">(!CARTPROMPT!)</a>&nbsp;&nbsp;</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 &amp; 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>
<!--start main content here -->
<div id="shopcontent">
<div align="left">
<span class="SectionTitleText">Now In: (!SECTION_TITLE!)</span>
</div>
<br/>
<asplaceholder id="PageContent" runat="server"></asplaceholder>
</div>
<!--end main content here -->
<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 &copy; 1995-2006. All Rights Reserved.</a></div>
<!--close page wrapper -->
</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
Attached Images
File Type: gif FF.gif (17.2 KB, 45 views)
File Type: gif IE7.gif (18.6 KB, 52 views)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Jun 28th, 2006, 15:26
masonbarge's Avatar
Highly Reputable Member
Join Date: Jan 2006
Location: Atlanta GA
Posts: 631
Thanks: 0
Thanked 0 Times in 0 Posts
Re: What am i doing wrong - browser differences !!??
Try:
display: block; for the blue box
padding: 0 7px; for the orange box

I hope one or both works for you
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Jun 28th, 2006, 18:02
Elite Veteran
Join Date: Aug 2005
Location: That Place
Posts: 2,044
Blog Entries: 1
Thanks: 0
Thanked 37 Times in 37 Posts
Re: What am i doing wrong - browser differences !!??
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.
Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Jun 29th, 2006, 14:22
minute44's Avatar
Most Reputable Member

SuperMember
Join Date: Apr 2006
Location: Nottingham UK
Age: 25
Posts: 1,351
Blog Entries: 1
Thanks: 0
Thanked 1 Time in 1 Post
Re: What am i doing wrong - browser differences !!??
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.
Last Blog Entry: Annoying people.... (Jan 16th, 2008)
Last edited by minute44; Jun 29th, 2006 at 14:27.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Jun 29th, 2006, 14:31
Elite Veteran
Join Date: Aug 2005
Location: That Place
Posts: 2,044
Blog Entries: 1
Thanks: 0
Thanked 37 Times in 37 Posts
Re: What am i doing wrong - browser differences !!??
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.
Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
doing, wrong, browser, differences

« Body ignoring <p> tag | Stubborn Align »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

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


All times are GMT. The time now is 01:39.

Contact Us - Web Design & Development Forums - Archive - Top

Funny Quotes :: Web Hosting :: Web Development India :: href="http://www.xtremewales.com/">Extreme Clothing :: SEO Company India :: Werbeartikel :: Search Engine Optimisation :: Website Templates ::

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved