CSS - Website Images Positioning Ok On Ffox And Ie On Pc But Not On Apple Firefox Or Safari

I have tested in Mac FF and Safari and PC FF and my page appears correct. In IE7, the images at the bottom (#bottom) don't match up (with #nav). If I delete the 10 px padding on #bottom, it appears correctly in IE7, but not the other browsers. Can anyone tell me why this is happening? Is there a bug fix somewhere?

Unfortunately, this forum won't let me post my url because I'm new, so I'm not sure how to describe what is happening without a visual, but here goes: I have a background image that encompasses the entire page. Because of my rollovers on my images at the bottom (contained in #bottom), I kept the background when making the images. The background on the images in #bottom do not match up with the background, thereby creating a disjoint, or "leap," between #nav and #bottom. Why would this happen in IE7 and not FF or Safari? (See first paragraph for padding explanation.)

css:
@charset "UTF-8";
#outer {
width: 723px;
background-image: url(images/art_bground.jpg);
background-repeat: no-repeat;
position:relative;
float: none;
margin: 0 auto;
}

#bottom {
margin: 0px;
height: 312px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
img display: block;
}
#body {
margin-top: 0px;
margin-right: 25px;
margin-bottom: 0px;
margin-left: 260px;
height: 208px;
padding-top: 25px;
padding-bottom: 0px;
}
a:link {
color: #c33b03;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #996600;
}
a:hover {
text-decoration: none;
color: #6a2e09;
}
a:active {
text-decoration: none;
color: #6a2e09;
}
.text {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #6a2e09;}
.navtext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #c33b03;
margin-top: -10px;
}
.bold {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #c33b03;
font-style: normal;
}
#nav {
margin-top: 0px;
margin-right: 25px;
margin-left: 520px;
margin-bottom: 0px;
height: 178px;
}

Hi all, new to the forum. Can't figure out why my absolute positioned images are moving with the window in safari? perfect in FF and IE. please help!

yogadebra dot com

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

I am making a Mac help site for a friend, and want the site to be compatible with as many browsers as possible. I am aware that IE doesn't follow the rules with css, which is why I have made a plain version of the site as well. Basically, the site is composed of two tables, the top one is the banner with buttons, and the bottom one has text. The background is fixed, as is the top table (so the only thing that moves when you scroll is the table with the text). My problem is that the top table can be centered either for Safari, or Firefox, but I have not found a way to center both of them.

EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing

When I do this, it is centered on Firefox:
Code:

<style type="text/css">
<!--
body {
	background-image: url(background.gif);
	background-repeat: repeat-x;
	background-attachment:fixed;
	background-color: #000000;
}
#toptable {
	position: fixed;
	top: 0;
	height: 140px;
	bottom: auto;
	z-index: 2;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#encapsule {
	margin-left: auto;
	margin-right: auto;
	}

#centered
{
text-align: center;
}

#centered table
{
margin: 0 auto;
text-align: auto;
}


#bottable {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top: 140px;
	z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="centered" id="encapsule">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
  <tr>
    <td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
      <tr>
        <td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
            <tr>
              <td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
              <td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
              <td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
              <td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
              <td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
              <td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
              <td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
            </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table> </div>

When I do the following, it centers it on Safari:
Code:

<style type="text/css">
<!--
body {
	background-image: url(background.gif);
	background-repeat: repeat-x;
	background-attachment:fixed;
	background-color: #000000;
}
#toptable {
	position: fixed;
	top: 0;
	height: 140px;
	bottom: auto;
	z-index: 2;
}
#encase {
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
#bottable {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top: 140px;
	z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
  <tr>
    <td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
      <tr>
        <td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
            <tr>
              <td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
              <td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
              <td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
              <td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
              <td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
              <td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
              <td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
            </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>

Any help is appreciated, as I am totally stuck. I have been using http://theodorakis.net/tablecentertest.html to see which works on both Firefox and Safari, but none of them work for both. Thanks!

EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing

When I add a gradient image to my submit button it works fine in IE but won't depress in Firefox or Netscape. The form action works OK, but it's just the button doesn't do anything on screen with the mouse click...What am I doing wrong?

input.btn{
border-style: outset;
border-width: thin;
border-color:#CCFFFF;
color:black;
font-size: 60%;
font-weight:bold;
background: url(images/gradient.jpg) repeat-x;
}

Hi all, I was wondering if someone could help me out. I have two divs on top of each other: 1 is a menu, 1 is a grid. In IE, the grid is displayed directly below the menu. However, when I view the page in Safari or Firefox, the grid is displayed below and to the right of the menu. See screenshots



I have also included my HTML and CSS below. Thanks for your help!

Code:

/* Submenu */
.submenu{height:32px;background:url(../images/submenu_bg.jpg);border-top:1px solid #ccc; width:105%; }

.submenu a:active,.submenu a:focus{text-decoration:underline;}

.submenu ul{float:left;z-index:19; }

.submenu ul li ul{position:absolute;margin-top:29px;z-index:98;left:-999em;background-color:#f5f5f5;display:block;width:150px;}

.submenu li{float:left;list-style:none;background:url(../images/submenu_divider.gif) no-repeat right top;z-index:20;}

.submenu li a{color:#000000;text-decoration:none;font-size:10px;padding:7px 15px 7px 15px;display:block;font-weight:bold;font-family:Geneva, Arial, Helvetica, sans-serif;}

.submenu li a:hover{background:#f8f8f8 url(../images/submenu_divider.gif) no-repeat right top;}

.submenu li li a{color:#000000;text-decoration:underline;background:#F8F8F8;border-bottom:1px solid #CCC;border-right:0;display:block;width:120px;text-decoration:none;font-weight:normal;background-image:none;}

.submenu li li a:hover{color:#333;background-color:#f3f3f3;display:block;width:120px;border-bottom:1px solid #CCC;border-right:0;background-image:none;}

.submenu .active-menu ul{border-left:1px solid #CCC;border-right:1px solid #CCC;}

.submenu .active-menu{color:#FFF;text-decoration:none;background:#f5f5f5 url(../images/submenu_divider.gif) no-repeat top right;}

.submenu .active-menu ul li a:hover{text-decoration:underline;border-right:0;background:#fff url(../images/submenu-li-li-hover.gif) repeat-x top;color:#535353;}

.grid_maindiv
{
	position: relative; 
	border: 1px solid #cbc7b8; 
	overflow: hidden; 
	width: 105%; 
	font-family: verdana,arial;	
}

.grid_table
{
	background-color: white;
	width: 100%; 
	font-size: 10pt;
}

.grid_table_header
{
	background-image: url('../media/header.png'); 
	height: 27px; 
	color: white; 
	font-weight: bold; 
	font-size: 14pt;	
}

.grid_table_resize_row
{
	background-image: url('../media/resize.gif'); 
	width: 2px; 
	margin: 0px;	
}

.grid_table_header_row
{

	background-color: #EBEADB; 
	font-weight: bold;
	cursor:pointer;
	padding-left: 5px;
	padding-bottom: 0px;
	position: relative; 
	height: 18px; 
	overflow: hidden; 
	font-size: 10px;	
	cursor:pointer;
	border-bottom:2px solid #cbc7b8;
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid white;
	margin-bottom: 0px;
	background-image: url('../media/column.png'); 

}

.grid_table_header_row_hover
{
	font-weight: bold;
	cursor:pointer;
	padding-left: 5px;
	padding-bottom: 0px;
	position: relative; 
	height: 18px; 
	overflow: hidden; 
	font-size: 10px;	
	cursor:pointer;
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid white;
	margin-bottom: 0px;
	
	border-bottom:2px solid #f9b119;
	background-color: #FAF9F4;
	background-image:  url('../media/column_on.png'); 

}

.grid_column_resize
{
	cursor: e-resize; 
	width: 2px; 
	background-color: #cbc7b8;
	border-bottom:2px solid #cbc7b8;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.grid_table_row_uneven
{
	background-color: #EBEADB; 
}

.grid_footer
{
	background-color: #f9f9f9; 
	height: 20px; 
	color: #616161;
}

.grid_table_cell
{
	padding-left: 2px; 
	position: relative; 
	border-bottom: 1px solid lightgray;
	height: 28px;
	overflow: hidden; 
	margin: 0px; 
	font-size: 10px;
}

Code:

        <body onmouseup="SetMouseDown(false);" topmargin="2">

<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0"
CELLPADDING="0">
  <TR>
    <TD WIDTH="50%">
    <FONT SIZE="-1" FACE="Arial"><A HREF="http://www.itsect.com/" CLASS="topnav">Home</A>&nbsp;&nbsp;&nbsp;<B>
<A CLASS="topnav">text</A></B>&nbsp;&nbsp;&nbsp;<A HREF="https://secure.itsect.com/members/?_page=account:account" CLASS="topnav">Account</A>&nbsp;&nbsp;&nbsp;<A
    HREF="http://www.itsect.com/support/" CLASS="topnav">Help</A></FONT></TD> 
    <TD WIDTH="50%">

    <P ALIGN=RIGHT><B><FONT SIZE="-1" FACE="Arial"><a CLASS="topnav">john</a></FONT></B><FONT
     SIZE="-1" FACE="Arial"> | <A HREF="https://secure.itsect.com/members/?_page=account:account" CLASS="topnav">My Account</A> |
    <A HREF="http://www.itsect.com/members/?_page=account:account&_logout=Y" CLASS="topnav">Logout</A></FONT></TD> 
  </TR>
</TABLE>
<HR SIZE=1 COLOR="#000000" WIDTH="100%">
<a href="view.php"><img src="images/ss_logo.gif" border="0" height="39" width="243"></a>
<br>

<div class="submenu">
	<ul>

			<li><a href="view.php">Show All</a>
</li>
			<li><a href="view.php?trash=1">View Trash</a>
</li>
			<li><a href="http://www.itsect.com/engine/filterpop.php" title="SiteSnipe - Create and View Filters" onclick="return GB_show('SiteSnipe - Create and View Filters', this.href,500,600)">Create/View Filters</a>
</li>
			<li><a href="http://www.itsect.com/engine/reportspop.php" title="SiteSnipe - Schedule Reports" onclick="return GB_show('SiteSnipe - Schedule Reports', this.href,500,600)">Schedule Reports</a>
</li>	
			<li><a style="color: #000080; text-decoration: none;">Viewing: All Listings</a></li>	<form action="view.php" method="post">

			<li><a>Quick Search: <input type="text" name="srch" value="" CLASS="frm2"> <input type="image" src="images/go.gif" name="go" border="0" ALIGN="MIDDLE"></a>
</li>	</form>

	</ul>
</div>

                <div class='grid_maindiv' id="grid" width=100%>

GRID

</div>

Greetings

Well, what can I say. I'm a PC. I've been building these websites and have been validating them and all, and look great in IE 6 & 7. But when I finally get around to downloading the latest version (3.2) of Safari and Firefox, for some reason my background-color doesn't work right.

Here's the site:
http://www.freshrod.com/maryville/maryvillemo.html

Have tried googling it, but no real answers yet. Anyone experience this before?

I cannot seem to get the CSS drop down menu system to work in IE6 but it works in IE7. I tell the Css to use globalIE.css
Code:

<!--[if IE]>QU
            <link rel="stylesheet" href="<?=$base_url;?>/_src/globalIE.css"      
            type="text/css">       
 <![endif]-->

Here is the menu system:

Code:

menu5platinum[4]='<div id="menu"><ul><li><ul><li>'+
         '<a href="./ChargeOffs.php" title="Creditor Actions">Creditor Actions</a>'+
         '<ul><li><a href="./charge_offs.php" title="Charge Offs">Charge Offs</a></li>'+
         '<li><a href="./collection_accts.php" title="Collections">Collections</a></li>'+
         '<li><a href="./late_payments.php" title="Late Payments">Late Payments</a></li>'+
         '<li><a href="./repossessions.php" title="Repossessions">Repossessions</a></li>'+
         '<li><a href="./Foreclosure.php" title="Foreclosure">Foreclosure</a></li></ul>'+
         '</li></ul></li></ul></div>';

(It rests inside of a javascript function)

and here is the CSS:
Code:

/**************** menu coding *****************/
#menu { width: 100%; background: #555555; border-style: none; font: normal 12px Verdana;}
#menu ul { list-style: none; margin-top: -7px; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: 0; line-height: 18px; }
#menu a, #menu h2 { border-bottom: 1px solid #c0c0c0;   font-family: helvetica, arial, verdana, sans-serif; display: block; }
/*#menu h2 { color: #fff; background: #000; }*/
#menu a { color: #f2f2f2; background: #555555; text-decoration: none;}
#menu a:hover { color: #f2f2f2; background: #8b8b8b; }
#menu li {position: relative;} 
#menu ul ul ul { position: absolute; top: 0; left: 108.5%; width: 100%; border-left: 1px solid #c0c0c0; margin-top: 0; margin-bottom: 0; margin-left: 1px; margin-right: 0;}
div#menu ul ul ul, 
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Any help with this is greatly appreciated. Thanks.

Hi All,

I am new to this forum and to CSS and Web Development as a whole. I am a notch up from "total n00b".

I can't post links so the website is www (dot) authenticimpressions (dot) com

I built this site for my wife using Wordpress, some plugins, and some themes I bought. The Galleries all look great in Chrome and Firefox on PC, and in Firefox and Safari on Mac. But in IE7 on PC, I get a 4 or 5px white border on the bottom and the left in each of the galleries. I've played and played with the stylesheets and cannot figure this one out.

What other information should I post or provide to get some help?

Thanks in advance, I really appreciate it.

I have a div that I have set the overflow property to auto - enabling scroll bars when the content is longer then the fixed size of the div. This doesn't seem to work in Safari, or and older version of Firefox.

I could use overflow: scroll, but then there is a scroll bar when the content doesn't overflow.

Is there any clever fix for this?

Cheers,

whiteatom

hello. i'm using a CSS tutorial and DREAMWEAVER to build a website. i find that the site is interpreted the way i would like it in either Firefox or Safari...but not in IE. When links are hovered over while using IE, the page distorts. has anyone experienced this type of problem before? thank you in advance for your time and assistance!

i did post several explanatory screenshots to illustrate the problem.

replace each "@" with a period. mea culpa.

www@wwpea@net/screenshots@htm

Hi!
I am making an online store for a very important client of mine. I build a shopping sub-list which floats to the left of the main page... and it looks BEAUTIFUL in Safari. But the images are not displaying correctly in Firefox.

I was hoping somebody could help me. Also, could somebody tell me how it looks on IE? I have a mac, and my client is probably using IE... so I can't see how it looks


Anyway, the site is.... blocked



and the CSS

#shoppinglist1 li {
float:right;
list-style: none;
display:block; }

#shoppinglist1 a{
width:100px;
height:20px;
text-decoration:none;
background-image:url(images/shoppingmenu-bgsmall.gif);
background-repeat: repeat;
background-position: center center; }

#shoppinglist1 a:hover {
width:100px;
height:20px;
text-decoration:none;
background-image: url(images/shoppingmenu-hover.gif);
background-position: center center;
}

#shoppinglist1 a:active {
width:100px;
height:20px;
text-decoration:none;
background-image: url(images/shoppingmenu-active.gif);
background-position: center center;
}

and the HTML

<div id="shoppinglist">
<img src="images/shoppingmenu_top.gif" style="margin: -15px auto;"/>
<ul id="shoppinglist1">
<li><a href="#"><img src="images/shoppingmenu_03.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_04.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_05.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_06.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_07.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_08.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_09.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_10.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_11.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_12.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_13.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_14.gif" align="center" border="0"/></a></li>

</ul>
<img src="images/shoppingmenu_bottom.gif" />
</div>
Thank you so much for your help!

Hello all,

I have bumped into some strange problems. Chrome seems to be viewing my fonts alot thinner/smaller than Safari and Firefox. Is there a method to create consistency and ignoring the webbrowsers standards? Its creating a mess, specially with my text which is using text-shadow. The blur looks like disaster.

Thanks in advance.

Hi all,

My first post, a request for help please! I have been designing a site and checking in Safari, just come to check in IE7 and its all over the place. I get the feeling that there is a simple bug fix I need to add, but with deadline approaching fast (tomorrow am client reviews the site) my mind is all over the place!

If anyone would be kind enough to view:
cavendish-cs.co.uk/beta/

You will see in IE7 the top image will not sit next to the navigation. Check in Safari or Firefox and you can see how it should look

Any help greatly appreciated

Thanks

Craig

I'm building a "Coming Soon" page in Dreamweaver. It looks the way I want it to when previewed in Firefox (version 3.6.13), but not in Safari (version 4.1.2). Specifically, my line breaks and the margins on my image are ignored. Here's my code:

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>Quest Sports Medicine</title>
<link href="file://Macintosh HD/Volumes/My GS Drive/global.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
.center-wrap p {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #000;
	font-size: 30px;
	line-height: 35px;
	padding: 0px;
	float: left;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.center-wrap h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 66px;
	font-weight: bold;
	color: #942610;
	text-align: center;
	line-height: 64px;
	margin-top: 83px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.center-wrap img {
	margin-top: 47px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 248px;
}

}
-->
</style>
</head>

<body>

<div class="all-wrap">

<div class="center-wrap">  
  <h2>NEW WEBSITE<br />
  COMING SOON</br></h2>
  <p>For information on the products we sell, how to place an order or any questions regarding recent orders, please call us at (717)-687-7178<br />
  or toll-free at 1-800-387-1067. You can also reach us at our new e-mail address, questsports@comcast.net</br></p>
  <img src="images/qsm-logo.gif" width="436" height="260" alt="Quest Sports Medicine logo" />
  </img></div> 


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

Any thoughts on what I need to change? Thank you.