PDA

View Full Version : Layout issues between browsers


cocoonfx
03-10-2008, 11:21 PM
Hello

I am working from a mac and i have tested the following URL on Safari,firefox and Opera.

http://www.activ8-fitness.com/studio.html

Safari works as it should and same with firefox but Opera and on IE6 and IE7 the layout changes.

Could anyone advise what the best hacks are for IE browses? or advise where i am going wrong. (please ignore the colours of the site as its a draft version of the site).

mangofreak
03-11-2008, 03:09 AM
I would suggest to develop testing first in the most used browsers meaning IE, FF, Opera, Safari, etc. I have some clients using Mac-Safari and I test first on FF, IE, And Opera and most times than not works well.

back to business, how is it supposse to look. I am looking at it in IE7, FF and Safari and it looks the same to me. Where is the error?

edbr
03-11-2008, 04:41 AM
absolutely hate it or not ie is still the main browser used. Davidj posted a great link a week or so ago with a site to test on lots of browsers,

cocoonfx
03-11-2008, 07:54 AM
Hello Chaps

Ok the site should look like the image below but i need to make sure the gap between the left and right box is 5px. When i asked a friend to check this page on IE6 the right column sat under the picture leaving a white space to the right.

Also on the other pages i have three columns and the right one also sits under the center column.


Please see attached;

err.jpg - how it should look like
err2.jpg - how it looks in ie etc..

Kind regards
Cocoonfx

edbr
03-11-2008, 09:22 AM
yes i checked wit ie6, same . Can you post the relevant code for the divisions?

cocoonfx
03-11-2008, 10:16 AM
Hello

Here is the html. (The div are #left,#right)


<div id="wrapper">
<div class="logo"></div>
<div id="main">
<div id="left">
<h1><img src="studio.png" width="550" height="367" hspace="5" vspace="5" /></h1>
</div>
<div id="right">
<h1>Studio Equipment</h1>
<ul>
<li>Nordic Treadmill 20 pre set program fan assisted</li>
<li>Nordic Crosstrainer 15 pre set programs</li>
<li>Concept 2 Rower</li>
<li>Nautilus Smith Machine &amp; Multi Gym</li>
<li>Nautilus Adjustable D/Bells ranging from 1-21kgs</li>
<li>1 x Total Gym (Cable Machine)</li>
<li>1 x Bosu Intergrated Balance Board</li>
<li>2 x Fitballs</li>
<li>1 x medicine Ball</li>
<li>2 x Reebok resistance Tubes</li>
<li>1 x Reebok Step Box</li>
<li>1 x Chin Up Bar</li>
<li>1 x Leather Punch Bag</li>
<li>1 x Kick Boxing Shield</li>
<li>1 x Pair of Thai Boxing Pads</li>
<li>2 x Pairs of Focus Boxing Pads</li>
<li>4 x Pairs of Boxing Gloves</li>
<li>Large matted area for core & stretching work</li>
<li>Outside Area for training</li>
<li>Tanita Body fat & Calorie Analysis Scales</li>
</ul>
<p>We are in an ideal location for outdoor activities:</p>
<p>Running, Cycling, Boot camps, Circuits & Hill walking or Trekking.</p>
</div>
<div id="footer">
<div align="center">&copy; 2008 Activ8 Fitness Ltd - all rights reserved <a href="<A href="http://www.cocoonfxmedia.co.uk">Site">http://www.cocoonfxmedia.co.uk">Site built by Cocoonfxmedia</a> </div>
</div>
</div>
<div id="sep"></div>
</div>

Here is the css
@charset "UTF-8";
#wrapper {
background-color: #CCCCCC;
width: auto;
margin-right: auto;
margin-left: auto;
height: auto;
padding: 5px;
}
body {
background-color: #4C4D49;
}
.logo {
background-image: url(/logo2.png);
background-repeat: no-repeat;
height: 85px;
width: auto;
padding: 5px;
background-color: #FFFFFF;
}
#main {
background-color: #FFFFFF;
width: auto;
margin-top: 5px;
padding-top: 5px;
padding-bottom: 5px;
height: 505px;
}
#left {
background-color: #CCCCCC;
float: left;
height: 90%;
width: auto;
margin-right: 5px;
margin-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#center {
background-color: #CCCCCC;
height: 90%;
width: 55%;
padding: 5px;
float: left;
margin-bottom: 5px;
}
#right h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #000000;
margin: 5px;
}
#right h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
#right li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
#right p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 5px;
}
#right {
background-color: #CCCCCC;
float: right;
height: 90%;
width: auto;
padding: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
#sep {
clear: both;
}
#footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #CCCCCC;
height: 30px;
width: 98%;
float: left;
text-align: center;
margin-right: 5px;
margin-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
}
#form1 {
text-align: center;
background-position: center center;
padding: 5px;
}
label{
margin:.33em;
display:block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
}
input{
display:block;
width:200px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
margin-right: auto;
margin-left: auto;
left: auto;
right: auto;
}


cocoon... Please use code tags when posting. You should know this by now -dj

edbr
03-11-2008, 10:34 AM
left floats left and right floats right I think thats the prob but not completely sure try floating both left you have widths as auto I would use percentages.

as i said someone else may have a better answer

d a v e
03-11-2008, 12:13 PM
also have checked it at 1024 wide too? the right div drops down in firefox in windows

mangofreak
03-11-2008, 07:53 PM
try this Css. I made the width specific. It looks good on IE, FF and Safari.


#wrapper {
background-color: #CCCCCC;
width: auto;
margin-right: auto;
margin-left: auto;
height: auto;
padding: 5px;
width:1024px;
}
body {
background-color: #4C4D49;
}
.logo {
background-image: url(http://www.activ8-fitness.com/logo2.png);
background-repeat: no-repeat;
height: 85px;
width: auto;
padding: 5px;
background-color: #FFFFFF;
}
#main {
background-color: #FFFFFF;
width: auto;
margin-top: 5px;
padding-top: 5px;
padding-bottom: 5px;
height: 505px;
}
#left {
background-color: #CCCCCC;
float: left;
height: 90%;
/*width: auto;*/
width:559px;
margin-right: 5px;
margin-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#center {
background-color: #CCCCCC;
height: 90%;
width: 55%;
padding: 5px;
float: left;
margin-bottom: 5px;
}
#right h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #000000;
margin: 5px;
}
#right h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
}
#right li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
#right p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 5px;
}
#right {
background-color: #CCCCCC;
float: right;
height: 90%;
/*width: auto;*/
padding: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
width:430px;
}
#sep {
clear: both;
}
#footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #CCCCCC;
height: 30px;
width: 98%;
float: left;
text-align: center;
margin-right: 5px;
margin-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
}
#form1 {
text-align: center;
background-position: center center;
padding: 5px;
}
label{
margin:.33em;
display:block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
}
input{
display:block;
width:200px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
margin-right: auto;
margin-left: auto;
left: auto;
right: auto;
}

cocoonfx
03-11-2008, 10:31 PM
Cheers chaps the code seem to make the difference.