View Full Version : CSS Differences...
jussa
08-28-2006, 04:35 AM
ok, so im desinging my own personal website and i want some advice on the best way to do this...
i've been using ie, and have designed my page thus...and it looks pretty and beautiful and just houw it shoud.
however. i open up firefox and kablam, its FUBAR.
my question is this. as its still early stages of development, im kinda on the fence...
Should I A) Recode my site to conform to css standard browsers (Firefox) and then use graceful degredation to allow IE to work properly, or should i B) continue coding for IE and add firefox refinement??
Thanks, Justin
_Aerospace_Eng_
08-28-2006, 05:43 AM
I choose A. Its a whole lot easier to tweak IE than it is Firefox. But seeing as how its not good in Firefox in the first place makes me wonder if your coding is bad or not. Chances are it is. Run it through the validator (http://validator.w3.org) and see what errors you get. Post your code or a link to your site if you can.
kaitco
08-28-2006, 05:51 AM
Option (A), 100%.
As your site is still in its early phase of construction, it makes sense to just stop now and code for a standards-compliant browser like FF. Using the right tools, like here (http://www.bonrouge.com/) and here (http://www.w3schools.com/), it should not take you very long.
You should always code using a browser like FF and create fixes for IE. It is the only way to ensure that your page looks the same no matter what browser a visitor uses to view your site. And there is always the hope that IE 8+ will be comply with web standards and you would end up having to recode anyway. ;)
I am going to go ahead and say that this will most likely be the general consensus here.
Edit: Drats! Aerospace beat me in reply! :o
jussa
08-28-2006, 06:13 AM
nope, my XHTML and my CSS is valid...
i meant that the css is screwing with my page layout...positioning and things, which i think is that i css'd for the dodgy box model that IE comes standard with...
_Aerospace_Eng_
08-28-2006, 06:15 AM
Yeah it probably is but without seeing your code there is nothing we can do to tell you how to fix it.
jussa
08-28-2006, 06:43 AM
Yeah it probably is but without seeing your code there is nothing we can do to tell you how to fix it.
oh, i was planning on starting from scratch with my css...
but ill show u my page code if u want...and snippets of css, but ive just bought a css book and i can see already heaps of places that im going wrong...
so i was gonna recode my css...
My Markup
<!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><title>
:: EffekT.26 --
</title><link rel="stylesheet" href="styles/effekt26.css" type="text/css" /></head>
<body>
<form name="frmDefault" method="post" action="default.aspx" id="frmDefault">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTcwMzg4NTIxNGRknDQzXKyCQfi2QV30qhFLtuIcbcE=" />
</div>
<div id="divPageContainer">
<div id="divPageTopBar"></div>
<div id="divPageHeader">
<img src="images/global/header.gif" alt="" /></div>
<div id="divNavigation">
<ul>
<li><a href="http://localhost/effekt26/default.aspx"><img src="http://localhost/effekt26/images/global/menu_items/home.gif" alt="" /></a></li>
<li class="seperator"><img src="http://localhost/effekt26/images/global/menu_items/menu_sep.gif" alt="" /></li>
<li><a href="http://localhost/effekt26/projects.aspx"><img src="http://localhost/effekt26/images/global/menu_items/projects.gif" alt="" /></a></li>
<li class="seperator"><img src="http://localhost/effekt26/images/global/menu_items/menu_sep.gif" alt="" /></li>
<li><a href="http://localhost/effekt26/about.aspx"><img src="http://localhost/effekt26/images/global/menu_items/about.gif" alt="" /></a></li>
<li class="seperator"><img src="http://localhost/effekt26/images/global/menu_items/menu_sep.gif" alt="" /></li>
<li><a href="http://localhost/effekt26/links.aspx"><img src="http://localhost/effekt26/images/global/menu_items/links.gif" alt="" /></a></li>
<li class="seperator"><img src="http://localhost/effekt26/images/global/menu_items/menu_sep.gif" alt="" /></li>
<li><a href="http://localhost/effekt26/contact.aspx"><img src="http://localhost/effekt26/images/global/menu_items/contact.gif" alt="" /></a></li>
</ul>
<div style="clear:both;"></div></div>
<div id="divPageContent">
<div id="divContent">
<div class="divContentSection">
<div class="divContentHeader">
<h1><a href="http://localhost/effekt26/default.aspx?post_id=1">Welcome, Visitors!</a></h1>
<h5>Written by Freefall : <a href="http://localhost/effekt26/default.aspx?cat_id=1">General</a> : 8/21/2006</h5>
</div>
<div class="divContentText">
This is just a test post to ensure everything works
<br />
<div class="divBlogFooter">
<h5> 5 Comments Posted | <a href="http://localhost/effekt26/default.aspx?post_id=1#comments">View Comments</a></h5>
</div>
</div>
</div>
</div>
<div id="divSideBar">
<div class="divSideBarSection">
<div class="divSideBarHeader">
<h2>Catagories</h2>
</div>
<div class="divSideBarText">
<ul>
<li><a href="http://localhost/effekt26/default.aspx?cat_id=1">General</a></li>
<li><a href="http://localhost/effekt26/default.aspx?cat_id=2">Technology</a></li>
<li><a href="http://localhost/effekt26/default.aspx?cat_id=3">Code Snippets</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="divFooter"></div>
</div>
</form>
</body>
</html>
and for some of my css...
html body
{
width:100%;
height:100%;
background-image:url('../images/global/body_bg.gif');
margin:0;
}
.ProjectContainer ul
{
margin:3px 0px 3px 30px;
}
#divPageTopBar
{
background-color:#34A1EF;
height:6px;
line-height:6px;
font-size:6px;
width:800px;
border-bottom:1px solid #FFFFFF;
margin:auto;
color: inherit;
}
#divPageHeader
{
background-color:#0B7CCD;
height:76px;
width:800px;
border-bottom:1px solid #FFFFFF;
margin:auto;
color: inherit;
}
#divNavigation
{
background-image:url('../images/global/menu_bg.gif');
height:34px;
width:800px;
border-bottom:1px solid #FFFFFF;
margin:auto;
}
#divNavigation ul
{
list-style:none;
margin:0;
padding-left:30px;
}
#divNavigation ul li
{
float:left;
display:inline;
}
#divNavigation ul li.seperator
{
padding: 0px 20px;
}
#divPageContainer
{
margin:0px auto;
height:100%;
}
#divPageContent
{
background-color: #0C74BE;
margin:0px auto;
width:800px;
color: inherit;
}
#divContent
{
width:550px;
margin:6px;
background-color:#F5F7F8;
border:1px solid #09568E;
float:left;
height:400px;
color: inherit;
}
.divContentSection
{
background:#F5F7F8 url('../images/global/content_section_bg.gif') repeat-x bottom left;
color: inherit;
}
.divContentHeader
{
border-bottom:1px dashed #09568E;
padding-left:15px;
padding-top:5px;
margin:0px 40px 10px 10px;
}
.divBlogFooter
{
border-top:1px botted #09568E;
padding-left:15px;
padding-top:5px;
margin:10px 20px 5px -15px;
text-align:center;
}
.divContentText
{
font-family:Arial, Sans-Serif;
font-size:11px;
color:#2A5F85;
padding-bottom:10px;
padding-left:20px;
border-bottom:1px solid #09568E;
background-color: inherit;
}
#divSideBar
{
width:211px;
vertical-align:top;
margin:6px 6px 6px 0px;
height:400px;
background-color:#F5F7F8;
border:1px solid #09568E;
float:right;
padding-left:5px;
color: inherit;
}
.divContentHeader
{
border-bottom:1px dashed #09568E;
padding-left:15px;
padding-top:5px;
margin:0px 20px 10px 5px;
}
.divSideBarText ul
{
list-style:none;
margin:0;
padding-left:15px;
}
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.