ClioSport.net

Register a free account today to become a member!
Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

  • When you purchase through links on our site, we may earn an affiliate commission. Read more here.

css in firefox and I.E.



  A4 Avant
I'm starting to mess around with CSS and thanks to a few people on here I've overcome my first problem.

Now my second problem. Basically when the site is viewed in Internet Explorer it all aligns as it should. When viewed in Firefox all the text is lower than it should be!!

Is this a common problem?

I didn't really want to post the code as I'm sure you'll pull it to pieces.:eek: Remember I'm not a web designer and I'm trying to learn this in my own time so be gentle!

http://www.footprintcreative.com/Aspects%20Temp/Extensions/Ext01.html
 
  KG Exige - ex-V6 owner
Don't forget to test it on a Mac too, as well as IE6 & 7 (PC) - just to throw another few spanners into the works...

Inevitably when we make websites it never works on all platforms on first try. We get there in the end though.
 
  306 TD Slut
dude i just checked in IE7 and FF on PC and the text in the menu is too low on both, doesnt site in the box's.

why do you have a class assigned to each <li> tag in your menu?

As i was taught :))) on a website like that have a header div across the width at the top and then a content div in the center, fotter div at the bottom.

within the content div i'd have 2 columns leftColumn and rightColumn, leftColumn being for the navgigation and address in your case, and the rightColumn usedd for the main content, i.e the rollover thubs of the house.
 
  Rav4
Don't be ashamed to put your code up, we are all learners!!!!

Let me have a look. It can be something very simple and take some notes down from the furry_cup :)
 
  A4 Avant
Well I've just got home and the site looks the same as when at work for me in IE7. All the text lines up in the right places!!!

Just going to install firefox to have another look.
 
  A4 Avant
Heres the code. It's a mess but as said I'm still learning.:rasp:

Html:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Apects Building Company Ltd. - Extension One</title>
<link href="../Aspects.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
//-->
</script>
</head>
<body onload="MM_preloadImages('Images/Extensions/Extension01/ext01-02.jpg','Images/Extensions/Extension01/ext01-01.jpg','Images/Extensions/Extension01/ext01-03.jpg','Images/Extensions/Extension01/ext01-04.jpg','Images/Extensions/Extension01/ext01-05.jpg','Images/Extensions/Extension01/ext01-06.jpg')">
<div id="div-1">
<div id="div-1a"></div>
<div id="div-1b"></div>
<div id="div-1c"></div>
<div id="div-1d"></div>
<div id="div-1e" class="style4">
<ul>
<li class="menulinks">About Us</li>
<li class="menulinks"><a href="Ext01.html">Extensions</a></li>
<li class="menulinks"><a href="../New Builds/New Build01-01.html">New Builds</a></li>
<li class="menulinks">Services</li>
<li class="menulinks">Contact Us</li>
</ul>
</div>
<div id="div-1f" class="style3"><p>
Aspects Building<br />
Company Limited.<br />
Barry Smith,<br />
Fairview,<br />
Madeley Road,<br />
Belbroughton.<br />
DY9 9XL<br />
Office: 01562 711289<br />
Mobile: 07786 998089
</p>
</div>
<div id="div-2a"><p><span class="style1">Extension One</span><br /><span class="style2">Hartlebury</span></p></div>
<div id="div-2b"><img src="../Images/Extensions/Extension01/ext01-01.jpg" name="mainimage" width="400px" height="300px" id="mainimage" /></div>
<div id="div-2c">
<img src="../Images/Extensions/Extension01/ext01-01-small.gif" class="cursorforimages" width="50" height="50" onmouseover="MM_swapImage('mainimage','','../Images/Extensions/Extension01/ext01-01.jpg',1)" /><img src="../Images/Extensions/Extension01/ext01-02-small.gif" class="cursorforimages" width="50" height="50" onmouseover="MM_swapImage('mainimage','','../Images/Extensions/Extension01/ext01-02.jpg',1)" /><img src="../Images/Extensions/Extension01/ext01-03-small.gif" class="cursorforimages" width="50" height="50" onmouseover="MM_swapImage('mainimage','','../Images/Extensions/Extension01/ext01-03.jpg',1)" /><img src="../Images/Extensions/Extension01/ext01-04-small.gif" class="cursorforimages" width="50" height="50" onmouseover="MM_swapImage('mainimage','','../Images/Extensions/Extension01/ext01-04.jpg',1)" /><img src="../Images/Extensions/Extension01/ext01-05-small.gif" class="cursorforimages" width="50" height="50" onmouseover="MM_swapImage('mainimage','','../Images/Extensions/Extension01/ext01-05.jpg',1)" /><img src="../Images/Extensions/Extension01/ext01-06-small.gif" class="cursorforimages" width="50" height="50" onmouseover="MM_swapImage('mainimage','','../Images/Extensions/Extension01/ext01-06.jpg',1)" /></div>
<div id="div-2d">
<ul>
<li class="toplinks"><a href="Ext01.html">Extension One</a></li>
<li class="toplinks"><a href="Ext02.html">Extension Two</a></li>
<li class="toplinks"><a href="Ext03.html">Extension Three</a></li>
</ul>
</div>
<div id="div-2e">
<ul>
<li class="toplinks"><a href="Ext04.html">Extension Four</a></li>
<li class="toplinks"><a href="Ext05-01.html">Extension Five</a></li>
<li class="toplinks"><a href="#">Extension Six</a></li>
</ul>
</div>
<div id="div-2f"><p>This project started off as a four bedroom dwelling in Hartlebury. The main aim was to increase the two bedrooms immediately above the garage. The main problem with these existing rooms was that the sloping roof dramatically decreased the available living space.<br />
<br />
On the other side of the house we were asked to increase the size of the kitchen and incorporate a new utility room on the ground floor. This allowed us to expand the original bedroom on the first floor and integrate a walk in wardrobe. In the front elevation we were also able to include an ensuite for the main bedroom.<br />
<br />
The original main roof was extended above the garage. The side elevation wall next to the kitchen was completely removed whilst being supported. This allowed us to create the larger dwelling whilst keeping disruption to a minimum and allowing the day to day running of the house to continue.<br />
<br />
The works were started in April 2005 and completed in September 2005 which included refitting of the bathroom and kitchen.</p></div>
<div id="div-2g">
<ul>
<li class="thumblink">Previous</li>
<li class="thumblink">Next</li>
</ul>
</div>
<div id="div-3a"><p><span class="style3">www.aspectsbuilding.co.uk</span></p></div>
<div id="div-3b"></div>
<div id="div-3c"></div>
</div>
</body>
</html>
CSS:
Code:
/* CSS Document */
a:link {color: #666666}
a:visited {color: #666666}
a:hover {color: #CC0000}
a:active {color: #666666}
 
body
{
background-color: #FFFFFF;
font-family: "Gill Sans MT";
font-size:12px;
text-align: center;
color: #666666;
}
.style1
{
font-size: 19px;
}
.style2
{
font-size: 12px;
}
.style3
{
font-size: 12px;
color:#000000;
}
.style4
{
font-size: 19px;
}
.toplinks/*for top extension/newbuild links format*/
{
float:left;
list-style-type:none;
padding-left: 1em;
display:inline;
}
.menulinks/*left hand menu links format*/
{
padding-bottom: 13px;
list-style-type:none;
}
.menulinks a:link {color: #000000}
.menulinks a:visited {color: #000000}
.menulinks a:hover {color: #FFFFFF}
.menulinks a:active {color: #000000}
a {text-decoration: none}
.thumblink/*thumbnail links format*/
{
float:left;
list-style-type:none;
padding-left: 1.3em;
display:inline;
}
 
.cursorforimages
{
cursor:pointer;
}
#div-1
{
background-color: #FFFFFF;
width: 800px;
height: 750px;
position: relative;
margin-left: auto;
margin-right: auto;
text-align:left;
}
 
#div-1a/*top right image*/
{
background-image:url(Images/Common/TL-Background.gif);
background-repeat:no-repeat;
position:absolute;
left: 0px;
top: 0px;
width: 315px;
height: 359px;
}
#div-1b/*bottom right image*/
{
background-image:url(Images/Common/BR-Background.gif);
background-repeat:no-repeat;
position:absolute;
right: 0px;
bottom: 0px;
width: 200px;
height: 351px;
}
#div-1c/*bottom left red colour*/
{
background-color: #CC0000;
width: 144px;
height: 391px;
position: absolute;
left: 0px;
bottom: 0px;
}
#div-1d/*top right red colour*/
{
background-color: #CC0000;
width: 29px;
height: 399px;
position: absolute;
right: 0px;
top: 0px;
}
#div-1e/*lefthand menu*/
{
padding:0;
margin:0;
position: absolute;
height:200px;
width:200px;
left: -20px;
top: 135px;
}
#div-1f/*Aspects address details*/
{
background-color: #ff9999;
padding: 7px 13px 10px 10px; 
position: absolute;
left: 12px;
bottom: 25px;
}
#div-2a/*developmet name*/
{
position: absolute;
left: 205px;
top: 80px;
}
#div-2b/*development image*/
{
position: absolute;
width: 400px;
height: 300px;
left: 205px;
top: 133px;
border: solid;
border-color: #666666;
border-width: 1px;
padding: 1px;
}
#div-2c/*development thumbnail*/
{
position: absolute;
width: 100px;
height: 302px;
left: 620px;
top: 133px;
border: solid;
border-color: #666666;
border-width: 1px;
}
#div-2d/*Extension links Line 1*/
{
position: absolute;
left: 360px;
top: 5px;
width:350px;
}
#div-2e/*Extension links Line 2*/
{
position: absolute;
left: 368px;
top: 22px;
width:350px;
}
#div-2f/*developmet text*/
{
position: absolute;
left: 205px;
top: 445px;
width: 460px;
}
#div-2g/*Thumbnail next/prev buttons*/
{
color:#CCCCCC;
position: absolute;
left: 572px;
top: 415px;
width:350px;
}
#div-3a/*Web Address*/
{
padding:Opx;
margin:0px;
position: absolute;
right: 2px;
bottom: 2px;
}
#div-3b/*NHBC*/
{
background-image: url(Images/Common/NHBC-Logo.gif);
background-repeat: no-repeat;
position: absolute;
right: 20px;
bottom: 25px;
width: 69px;
height: 24px;
}
#div-3c/*Aspects Man Logo*/
{
background-image: url(Images/Common/Aspects-Man-Logo.gif);
background-repeat: no-repeat;
position: absolute;
left: 10px;
Top: 10px;
width: 169px;
height: 116px;
}

It's only the text that appears out of line! If the text is positioned from the top then it appears lower if it's positioned from the bottom it appears higher than it should!

Please help as I'm pulling what little hair I have left out!
 
Last edited:
  Rav4
u should really put the code in the "code" tags, could a mod please do that :)

Just having a look now.
 
  A4 Avant
Changed the layout of my last post. Hadn't realised thats what the code bit did!:eek:

I've started the webpage again because after reading another thread on here that furry cup posted I realised I wasn't using class's and ID's in the correct way.

It now lines up better but it's still not 100% perfect.

As a side issue, what format would you use for saving an image that is say 400 x 300. I normally use jpg's but someone recently mentioned using png's? Would you say an image that is 20kb in size is too large?
 


Top