...

View Full Version : Style works in Firefox 2 but not IE .. help please



caymaniac
12-29-2006, 11:38 PM
http://www.seaworldtours.com/test/
It works fine just how i want it to in Firefox .. but not in IE .. I thought maybe IE was over it's CSS centering problems .. but appreantly not. Or maybe it is just me :mad: .. I wondered if someone could point me in the right direction .. or fix it for me either is fine .... (to see what i want check in Firefox2 and then check it in IE .. the logo doesn't go where it's meant to. I may have a very simple coding error .. it may be impossible ... i just got too confused trying to get it to work in both :confused: )
the source code for that page is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="swexmain.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="contentbox"><div class="logo"><img src="../images/logo.png" alt="Seaworld Explorer" width="334" height="159"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="29" height="29">&nbsp;</td>
<td height="29" background="../images/top.png">&nbsp;</td>
<td width="29" height="29" background="../images/topright.png">&nbsp;</td>
</tr>
<tr>
<td width="29" background="../images/left.png">&nbsp;</td>
<td><p>content will go here and ....</p>
<p>here .................................</p>
<p>and then some more - here </p>
<p>and .......... maybe here too </p>
<p>and so on ......... and so on </p>
<p>&nbsp;</p></td>
<td width="29" background="../images/right.png">&nbsp;</td>
</tr>
<tr>
<td width="29" height="29" background="../images/bottomleft.png">&nbsp;</td>
<td height="29" background="../images/bottom.png">&nbsp;</td>
<td width="29" height="29" background="../images/bottomright.png">&nbsp;</td>
</tr>
</table></div>
</body>
</html>

and the CSS style sheet is currently very simple and looks like this:

.contentbox {
text-align: center;
position: relative;
height: auto;
width: 800px;
margin: auto;
top:0px;
}
.logo {
position:relative;
top:75px;
left:-169px;
width:334px;
height:159px;
}



please .. any help would be very much loved.

Giles

_Aerospace_Eng_
12-30-2006, 01:59 AM
Why are you using tables for page layout? Read the link in my sig titled "Why tables for layout is stupid?". Also your page appears to be messed up in Firefox 1.5.0.9 but then again we don't even know how its supposed to look. Take a screenshot and attach it so we know how it should look.

caymaniac
12-30-2006, 06:27 AM
Screenshot attached

don't know why the server isn't working

i don't know how to make the border and logo fit like that without tables ...feel free to educate me.

caymaniac
12-30-2006, 05:02 PM
Guys

I would still appreciate any help .. although my ISP seems to have blocked me from seeing myown site !! I can still ftp pages to it though.

Giles

Excavator
12-30-2006, 06:52 PM
Goodmorning caymaniac,
I can't get to it now either.

"Server not found"

I'd try having a look at it if I had the images to work with.

caymaniac
12-30-2006, 09:55 PM
http://www.caymaniac.ky/swex/test/

i put it up on another site for testing .. until i work out whats up with the server .. i thought it was an ISP thing.

cheers for looking at this .. i like your sig .. i built it for Firefox .. and have no idea how t make IE like it.

Oh and eventually i will want to put some buttons .. on the top outside side ofthe border .. css stylie that are maybe curved looking too. that whould be fairly easy right ?

caymaniac
12-31-2006, 02:24 PM
http://www.seaworldtours.com/test/

seems to be working again now too.

I have had some more playtime .. but I reverted back to the code above as I had no better results with the logo positioning in IE.

caymaniac
01-01-2007, 12:02 AM
http://www.seaworldtours.com/test/

Ok .. i changed a little of the CSS .. and made it work in both IE and Firefox .. still need to do backwards IE testing.

if you are interested .. all i did was make the current style sheet look like this :
.contentbox {
text-align: center;
position: relative;
height: auto;
width: 800px;
margin: auto;
top:85px;
}
.logo {
position:absolute;
top:-85px;
left:-157px;
width:334px;
height:159px;
}

caymaniac
01-01-2007, 01:03 AM
Ok all my code is now below .. i went to go add in my navigation bar .. and again .. it works in Firefox .. but in IE .. it appears too far above the border .. it is spot on perfect in Firefox ... what can i do for that ?
http://www.seaworldtours.com/test/
thanks for the help again ...


.contentbox {
text-align: center;
position: relative;
height: auto;
width: 800px;
margin-left: 159px;
top:85px;
}
.logo {
position:absolute;
top:-85px;
left:-157px;
width:334px;
height:159px;
}
#navigation {
list-style-type: none;
position:absolute;
top:-30px;
left:350px;
}
#navigation a
{
color: #000;
background: #ffa20c url(../images/tableft.png) left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a span
{
background: url(../images/tabright.png) right top no-repeat;
padding-right: 10px
}

#navigation a, #navigation a span
{
display: block;
float: left
}

/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */

#navigation a:hover
{
color: #fff;
background: #df0218 url(../images/tablefthover.png) left top no-repeat;
padding-left: 10px;
padding-bottom; 10px;
}
#navigation a:hover span
{
background: url(../images/tabrighthover.png) right top no-repeat;
padding-right: 10px;
padding-bottom: 6px;
}
#navigation ul
{
list-style: none;
padding: 0;
margin: 0
}
#navigation li
{
float: left;
margin: 0;
padding-right: 5px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Seaworld Explorer :: Nassau Bahamas :: Semi Submarine Tours</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="swexmain.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="contentbox">
<ul id="navigation">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Trips</span></a></li>
<li><a href="#"><span>Specials</span></a></li>
<li><a href="#"><span>About us</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul>
<div class="logo"><img src="../images/logo.png" alt="Seaworld Explorer" width="334" height="159"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="29" height="29">&nbsp;</td>
<td height="29" background="../images/top.png">&nbsp;</td>
<td width="29" height="29" background="../images/topright.png">&nbsp;</td>
</tr>
<tr>
<td width="29" background="../images/left.png">&nbsp;</td>
<td><p>content will go here and ....</p>
<p>here .................................</p>
<p>and then some more - here </p>
<p>and .......... maybe here too </p>
<p>and so on ......... and so on </p>
<p>&nbsp;</p></td>
<td width="29" background="../images/right.png">&nbsp;</td>
</tr>
<tr>
<td width="29" height="29" background="../images/bottomleft.png">&nbsp;</td>
<td height="29" background="../images/bottom.png">&nbsp;</td>
<td width="29" height="29" background="../images/bottomright.png">&nbsp;</td>
</tr>
</table></div>
</body>
</html>

Excavator
01-01-2007, 09:22 PM
Hello again caymaniac,
Happy New Year!

I finally got a chance to mess around with this last night, while waiting for the ball to drop.
A couple last tweaks on the menu and 2 validation errors today and it looks pretty good...except I notice you changed the logo a little.
Have a look at it here. (http://www.nopeople.com/cworld/)
-CSS and XHTML 1.0 Strict
-No tables
-Validates
- - expands with content and doesn't seem to break anywhere with text resize. /*Back again, seems like the menu breaks with resize. Should probably just make buttons for that*/
-No js and minimal hacks
-Tested on IE6 and FF2 on an XP box
-Tested on IE7 and FF2 on a Vista box

caymaniac
01-01-2007, 09:38 PM
see i never thought to combine the images like that

the menu on hover extends a little far down .. but it works when resized for me ...

very interesting to see how you went about it as well .. it has kinda opened my eyes to how it is meant to be done.

thank you so much. Seeing this should keep me in good standing for the future .. thanks so much

http://www.seaworldtours.com/test/index.php is my variation where the menu hovers are tidied up a little bit.

Tyrial101
01-02-2007, 07:44 AM
The Contacts button seems off Under Firefox 2 with a 1280 x 1024 Res.

I will look into it if you need help, but you may want to resolve it on your own.

Excavator
01-02-2007, 08:31 AM
the menu on hover extends a little far down
10px margin I left in by mistake. It's fixed now.

I still say it would be better to make those tabs with images, they would handle text resize much better.

caymaniac
01-02-2007, 02:03 PM
The Contacts button seems off Under Firefox 2 with a 1280 x 1024 Res.

It seems fine on my test site .. http://www.seaworldtours.com/test/

And I may think about doing the tabs as images .. it may work a little better you are right.

Giles

Excavator
01-02-2007, 05:03 PM
Goodmorning caymaniac, (have to wonder about that nic :) )

I keep trying to goto http://www.seaworldtours.com/test/ but it never works. It's been dead for a few days.

caymaniac
01-02-2007, 05:39 PM
i have no idea whats going on

i will check with my host
it was fine yesterday
now its down again

grrr anyway .. besides lack of content it's looking sweet



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum