1. Home
  2. Forums Index
  3. Browser Side / CSS 7:27 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Difference in rendering between my editor and all the browsers

having issues with a page page looking wrong in various browsers

         

JaYKay_01

6:22 pm on Nov 25, 2009 (gmt 0)

10+ Year Member



I have a webpage using a CSS style sheet and some styles declared on the page. In my designer (VS2008) it looks fine, but when viewed in all other browsers it looks wrong. I have got it to work before in IE8, by adding a metatag to the page to emulate IE7.

The page in question is here -

<snip>

Everything below the phone number should be in the grey box and the grey box should be centered. The red box should extend down to the bottom of the page with the button centred overlapping the red box (exactly the same as the home page).

Any ideas? Thanks!

[edited by: swa66 at 7:13 pm (utc) on Nov. 25, 2009]
[edit reason] No links please, see ToS and Forum Charter [/edit]

D_Blackwell

6:32 pm on Nov 25, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome JaYKay_01. The personal link is going to get chopped, so I cannot use it as a reference. It is showing nothing but a Runtime Error anyway on FF. And the home page: domain root is displaying 'Directory Listing Denied'. Just one reason no personal links are allowed here.

My recommendation is to strip the HTML and CSS down to the problem itself by commenting out extraneous markup unrelated to the problem. If the fix is not found during this process, post the test ready code that replicates the problem and we will look at the options.

Be sure to declare a DTD and validate the markup. That will avoid, eliminate, or rule out many problems.

JaYKay_01

6:39 pm on Nov 25, 2009 (gmt 0)

10+ Year Member



Thanks. It may have been because the latest version was still being uploaded. It should be up there now.

I will also paste in the code.

JaYKay_01

6:43 pm on Nov 25, 2009 (gmt 0)

10+ Year Member 



 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
title
</title><link href="CSS/MainStyles.css" rel="stylesheet" type="text/css" />
 
 
 <style type="text/css">
 
 .GreyMessageBox
 {
  border: 1px #C0C0C0 solid; 
  position:relative;
  width:735px;
 }
  
 
 .TextBoxes
 {
 font-family:Verdana;
  font-Size:Medium;
 width:210px;
 }
  .LargeTextBox
 {
 font-family:Verdana;
  font-Size:Medium;
 width:470px;
 height:141px;
 }
 
 .ColLeftSize
 {
  width:510px; 
 }
 .ColRightSize
 {
  width:223px;
 }
 
 </style> 
 
</head>
 
<body>
 
 <form name="Form1" method="post" action="ContactMe.aspx" id="Form1" class="content">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/long string" />
</div>
 
<div>
 
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/long string" />
</div>
 
 <div class="LeftGeckoDiv">
 <img id="imgGeckoLeft" src="Images/GeckoSmallLeft.png" style="border-width:0px;" />
 </div> 
 <div class="RightGeckoDiv">
 <img id="imgGeckoRight" src="Images/GeckoSmallRight.png" style="border-width:0px;" />
 </div> 
 <div class ="titleDiv" >
 
 Contact Me
 
 </div>
 
 
 <div class="mainDiv">
 
 <br />
 string
 <br />
 
 string
 <br />
 <br />
 
 
 <div class="GreyMessageBox">
 
 string
 
 <br />
 <br />
 <table >
 <tr>
 <td class="TdRight">Your Email:</td>
 <td><input name="UsersEmail" type="text" id="UsersEmail" class="TextBoxes" /></td>
 </tr>
 <tr>
 <td class="TdRight">Subject:</td>
 <td><input name="Subject" type="text" id="Subject" class="TextBoxes" /></td>
 </tr>
 
 </table>
 <br /> 
 
<div class = "ColDivLeft ColLeftSize"> 
 
<table>
 
<tr>
 <td>
  Message<br />
  <textarea name="Body" rows="2" cols="20" id="Body" class="LargeTextBox"></textarea>
 </td>
 </tr>
 <tr>
 <td class="TdCenter">
  <input type="submit" name="SendEmail" value="Send Message" id="SendEmail" class="standardbutton" />
 </td>
 
 </tr>
 
 <tr>
 <td>
  
 
 
 </td>
 </tr>
 
 
 </table>
 
</div>
 
 
 <div class = "ColRightSize ColDivRight">
 
 <br />
 
 <img id="Image1" src="Images/Mail.png" style="border-width:0px;" />
 
 
 </div>
 
 
 </div>
 
 <br />
 <br />
 </div>
 
 <div class ="footerButtons">
 
 <input type="image" name="imgbtnHome" id="imgbtnHome" src="Images/HomeButton.png" style="border-width:0px;" />
 </div>
 
 
 <div class="footer">
 <hr />
 string
 </div>
 
 </form>
</body>
</html>

StyleSheet - 

 
 body
{
background-image: url('../Images/background.png');
background-color: White;
background-repeat:repeat-x;
}
 .content 
{
background-color: White;
margin: auto auto auto;
margin-top: 2px;
width: 992px;
position: relative;
} 
.titleDiv
{
border-top: 1px #FF0000 solid;
text-align: center;
position: relative;
font-family: Arial Black;
font-size: 30pt;
color: Red;
width:746px;
height:67px;
}
.LeftGeckoDiv
{
float:left;
border-top: 1px #FF0000 solid;
border-Left: 1px #FF0000 solid;
position: relative;
width:122px;
height:68px;
}
.RightGeckoDiv
{
float:right;
border-top: 1px #FF0000 solid;
border-Right: 1px #FF0000 solid;
position: relative;
width:122px;
height:68px;
}
.mainDiv
{
text-align: center;
position: relative;
border-color: Red;
border-style: solid;
border-width: 1px;
font-family: Verdana;
font-size: large;
color: Black;
z-Index: 0;
width:990px;
}
.footerButtons
{
text-align:center;
position:relative;
margin-top: -30px;
z-Index:1;
}
.footer
{
text-align:center; 
font-family: Verdana; 
font-size: x-small; 
color: #C0C0C0;
 
}
.ColDivLeft
{
position:relative;
float: left;
}
 .ColDivRight
{
 text-align:left;
 float:right;
 position:relative;
}
.standardbutton
{
background-color:#F2F2F2;
border-Color:#CCCCCC;
border-Style:Solid;
border-Width:1px;
font-family:Verdana;
Font-Size:Medium;
Height:30px;
}
.TdRight
{
text-align: right;
}
.TdCenter
{
text-align: center; 
}
.TdCenterRed
{
text-align: center; 
color:Red;
}

[edited by: swa66 at 7:18 pm (utc) on Nov. 25, 2009]
[edit reason] removal of specifics [/edit]

JaYKay_01

3:51 pm on Nov 26, 2009 (gmt 0)

10+ Year Member



I've had some progress, but now the Greybox is not centered even though it's parent (MainDiv) has it's text-align property set to centre and the same for the table, that is not centred, although the name and mobile number is?!

Any ideas? 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
Contact Me
</title><link href="CSS/MainStyles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
 
.GreyMessageBox {
 border: 1px #C0C0C0 solid; 
 position:relative;
 width:735px;
 overflow:hidden;
 text-align:center;
 }
 
 .TextBoxes {
 font-family:Verdana;
 font-Size:Medium;
 width:210px;
 }
 .LargeTextBox {
 font-family:Verdana;
 font-Size:Medium;
 width:470px;
 height:141px;
 }
 
 .ColLeftSize {width:510px;}
 .ColRightSize {width:223px;}
</style> 
</head>
<body>
<form name="Form1" method="post" action="ContactMe.aspx" id="Form1" class="content">
 
 <div class="LeftGeckoDiv">
 <img id="imgGeckoLeft" src="Images/GeckoSmallLeft.png" style="border-width:0px;" />
 </div> 
 <div class="RightGeckoDiv">
 <img id="imgGeckoRight" src="Images/GeckoSmallRight.png" style="border-width:0px;" />
 </div> 
 
 <div class ="titleDiv">Contact Me</div>
 <div class="mainDiv">
 <br />Mr #### ####
 <br />
 
 Mobile:&nbsp;###########
 <br />
 <br />
 
 
 <div class="GreyMessageBox">Send me a message now
 <br />
 <br />
 <table >
 <tr>
 <td class="TdRight">Your Email:</td>
 <td><input name="UsersEmail" type="text" id="UsersEmail" class="TextBoxes" /></td>
 </tr>
 <tr>
 <td class="TdRight">Subject:</td>
 <td><input name="Subject" type="text" id="Subject" class="TextBoxes" /></td>
 </tr>
 </table>
 <br /> 
<div class = "ColDivLeft ColLeftSize"> 
<table>
<tr>
 <td>Message<br />
 <textarea name="Body" rows="2" cols="20" id="Body" class="LargeTextBox"></textarea>
 </td>
 </tr>
 <tr>
 <td class="TdCenter">
 <input type="submit" name="SendEmail" value="Send Message" id="SendEmail" class="standardbutton" />
 </td>
 </tr>
 <tr>
 <td></td>
 </tr>
</table>
</div>
 
<div class = "ColRightSize ColDivRight">
 <br />
 <img id="Image1" src="Images/Mail.png" style="border-width:0px;" />
 </div>
</div>
 <br />
 <br />
 </div>
 
 <div class ="footerButtons">
 <input type="image" name="imgbtnHome" id="imgbtnHome" src="Images/HomeButton.png" style="border-width:0px;" />
 </div>
 
 <div class="footer">
 <hr />
 All rights reserved. 
 </div>
 </form>
</body>
</html>

Style sheet ->


body {
background-image: url('../Images/background.png');
background-color: White;
background-repeat:repeat-x;
}

.content {
background-color: White;
margin: auto auto auto;
margin-top: 2px;
width: 992px;
position: relative;
}

.titleDiv {
border-top: 1px #FF0000 solid;
text-align: center;
position: relative;
font-family: Arial Black;
font-size: 30pt;
color: Red;
width:746px;
height:67px;
}

.LeftGeckoDiv {
float:left;
border-top: 1px #FF0000 solid;
border-Left: 1px #FF0000 solid;
position: relative;
width:122px;
height:68px;
}

.RightGeckoDiv {
float:right;
border-top: 1px #FF0000 solid;
border-Right: 1px #FF0000 solid;
position: relative;
width:122px;
height:68px;
}

.mainDiv {
text-align:center;
position: relative;
border-color: Red;
border-style: solid;
border-width: 1px;
font-family: Verdana;
font-size: medium;
color: Black;
z-Index: 0;
width:990px;
}

.footerButtons {
text-align:center;
position:relative;
margin-top: -30px;
z-Index:1;
}

.footer {
text-align:center;
font-family: Verdana;
font-size: x-small;
color: #C0C0C0;
}

.ColDivLeft {
position:relative;
float: left;
}

.ColDivRight {
text-align:left;
float:right;
position:relative;
}

.standardbutton {
background-color:#F2F2F2;
border-Color:#CCCCCC;
border-Style:Solid;
border-Width:1px;
font-family:Verdana;
Font-Size:Medium;
Height:30px;
}

.TdRight {text-align: right;}
.TdCenter {text-align: center;}

.TdCenterRed {
text-align: center;
color:Red;
}

[edited by: SuzyUK at 4:24 pm (utc) on Nov. 26, 2009]
[edit reason] code trim and removed specifics [/edit]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 7:27 pm May 1, 2026