PDA

Click to See Complete Forum and Search --> : Ok getting better but need some help on this page.

royhobbs
09-23-2009, 04:51 PM
ok i have 2 problems. thanks to the board i have managed to get this far. i can easily do all of this in HTML but i am trying to get more into styles. here is the webpage in question: http://www.adaware.net/ede/indexcss.html

Question #1: Why does this look so wacked in FireFox but ok in IE? If i wanted to use the combination of CSS and standard HTML with rows and coumns? Is doing a combination of both even possible? i am assuming i need to make a container and align this with the bottom of my type div tags and somehow place the html inside there. as you can see i am having spacing issues on IE but on firefox its completely messed up.

Question 1A: Given i didnt want to touch any more code, and wanted to use the css and the standard html, how could i get this to align properly in both IE and Firefox like this? http://www.genuineedelbrock.com/ which was very easy to do using tables?

Question 2: i would like to get this page to be 100% using CSS like i did the top portion, if you look at the code you can see the bottom portion is just using rows and columns, how can i achieve this? using spans or divs etc? and have it work in firefox?

THANKS SO MUCH!
royhobbs
09-24-2009, 03:03 AM
anyone?
coothead
09-24-2009, 07:52 AM
Hi there royhobbs,

try it like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<!--this is for coothead testing and may be removed -->
<base href="http://www.adaware.net/ede/">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Test</title>

<style type="text/css">
body {
background-color:#000;
background-image:url(img/promo_bg.jpg);
background-attachment:fixed;
background-position:top center;
}
img, object {
display:block;
}
#container {
width:860px;
margin:auto;
}
#navigation {
height:17px;
margin:0;
padding:7px 0;
border-top:4px solid #ff642d;
list-style-type:none;
background-color:#1b2127;
}
#navigation li {
float:left;
}
#navigation li a {
display:block;
height:17px;
text-indent:-9999px;
}
#a1 {
width:86px;
background-image:url(img/nav_home.gif);
}
#a2 {
width:168px;
background-image:url(img/nav_cyl_promo.gif);
}
#a3 {
width:157px;
background-image:url(img/nav_coupon.gif);
}
#a4 {
width:178px;
background-image:url(img/nav_in_promo.gif);
}
#a5 {
width:130px;
background-image:url(img/nav_ede.gif);
}
#a6 {
width:141px;
background-image:url(img/nav_contact.gif);
}
#content {
height:1%;
padding:23px;
background-color:#fff;
overflow:hidden;
}
#content object {
width:814px;
height:233px;
}
#content_left {
float:left;
width:520px;
}
#cyl {
margin-top:23px;
}
#intake {
margin-top:31px;
}
#content_right {
float:left;
width:265px;
padding:23px 0 0 29px;
}
#content_right object {
width:265px;
height:225px;
}
</style>

</head>
<body>

<div id="container">

<img src="img/header.jpg" alt="">

<ul id="navigation">
<li><a id="a1" href="#">home</a></li>
<li><a id="a2" href="#">cylinder head promo</a></li>
<li><a id="a3" href="#">redemption coupon</a></li>
<li><a id="a4" href="#">intake manifold promo</a></li>
<li><a id="a5" href="#">edelbrock.com</a></li>
<li><a id="a6" href="#">contact us</a></li>
</ul><!-- end #navigation -->

<div id="content">

<object type="application/x-shockwave-flash" data="http://www.genuineedelbrock.com/main.swf" >
<param name="movie" value="http://www.genuineedelbrock.com/main.swf">
</object>

<!--<img src="img/sample.jpg" alt=""> this is the replacement image for the swf file-->

<div id="content_left">

<img id="cyl" src="img/banner_cyl.jpg" alt="">
<img id="intake" src="img/banner_intake.jpg" alt="">

</div><!-- end #content_left -->

<div id="content_right">

<object type="application/x-shockwave-flash" data="http://www.powertvonline.com/xp2/d3d3LmVkZWxicm9ja3R2LmNvbQ/4128/1192/off">
<param name="movie" value="http://www.powertvonline.com/xp2/d3d3LmVkZWxicm9ja3R2LmNvbQ/4128/1192/off">
</object>

</div><!-- end #content_right -->

</div><!-- end #content -->

</div><!-- end #container -->

</body>
</html>

coothead