Topic: Cross Browser Design + CSS Type Layout + My Suckness = Hell !!! Pages that link to <a href="https://ozoneasylum.com/backlink?for=21623" title="Pages that link to Topic: Cross Browser Design + CSS Type Layout + My Suckness = Hell !!!" rel="nofollow" >Topic: Cross Browser Design + CSS Type Layout + My Suckness = Hell !!!\
 
Author Thread
BlackKingThanatos
Nervous Wreck (II) Inmate

From:
Insane since: Feb 2004

 IP logged posted posted 05-01-2004 19:53 Edit Quote

Sigh.....please help me....I'm trying a CSS type design for the first time and in IE actually it turns out resembling of something that I want, but when I try it on Mozilla....It's look like a Pig Gut in a blender and was added with horse blood.....In short, it's messy !

My question is....is there any guidelines when creating a cross-browser design ? is there any tricks ? Frankly, I know that IE is handling CSS poorly but Mozilla actually handle it quite well...but then what actually the differences ? Can you please tell me or at least show me a link that tell me ?

Thx and Regard.....
BlackKingThanatos
Nervous Wreck (II) Inmate

From:
Insane since: Feb 2004

 IP logged posted posted 05-01-2004 19:58 Edit Quote

Well While you there can you check it out for me....well in itself the code is pretty messy, so if you don't fell like it I can understand ( because actually I'm confused bout my own code too )

*****************************************************************************************

body {margin:0px; padding:0px;}
#logo{width:600px;height:10px;}
#container {
width: 600px;
position: absolute;
left: 50%;
margin-left: -300px;
height:100%;
}
#header { width:100%;height:107px;position: relative; background-image:url(header.jpg);background-repeat:no-repeat;border-top:1px solid;border-right:1px solid ;left;border-left:1px solid ;}
#subnav { width:100%;border-bottom:1px solid gray;border-top:1px solid gray;border-right:1px solid ;left;border-left:1px solid ;position:relative;clear:both }
#subnavlist {font: 10px Verdana, sans-serif; padding: 0.25em 0.5em 0.25em 0.75em;list-style-type:none;float:right;}
#subnavlist li { display : inline;border-left: 1px solid gray;padding: 5px;}
#subnavlist li a {color: black;text-decoration: none;}
#subnavlist li a:hover { colorrange;}
#left { width: 15%; height: 100%;float:left;border-right:1px solid gray;left;border-left:1px solid ;}
#content { width:83.5%;height:100%;float:right;border-right:1px solid ;}
#heading { width : 100%; height: 20px; border-bottom:1px solid gray;background:#ccc;text-align:center;font: 12px arial;color: white;padding: 2px 2px 2px 15px;font-weight:bold;}
.incontent { width : 100%; height: auto;margin-bottom:11px; }
.incontent h3 {margin-top:10px;border-bottom:1px solid gray;padding-bottom:3px;padding-right: 15px;text-align:right;font-family: verdana,sans-serif;colorrange;}
.incontent h6 {padding-right: 15px;text-align:right;font-family: sans-serif,verdana;color:gray;}
.incontent p { padding: 0px 9px 5px 17px; font-family: sans-serif,verdana,times new roman; font-size: 0.7em;margin-top: 2px;margin-bottom: 5px;text-align:justify;}
.nested {width: 100px; height: 100px; float:left;margin: 10px 5px 0 5px;padding:7px;}
div.nested img {border:1px solid;}

#navlist
{
padding: 0 1px 1px;
margin-left: -1px;
margin-right: -2px;
font: bold 12px Verdana, sans-serif;
width: 100px;
}

#navlist li
{
list-style: none;
margin-top: 5px;
border-bottom: 1px solid gray;
text-align: left;
}

#navlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 1.5em;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
color: orange;
}

#footer {width:600px;height:10px;border-top:1px solid ;}

*****************************************************************************************

This is the CSS
BlackKingThanatos
Nervous Wreck (II) Inmate

From:
Insane since: Feb 2004

 IP logged posted posted 05-01-2004 19:59 Edit Quote

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>A Home For You And Me --- X'Bangers !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url("Images/CSS.css");
-->
</style>
</head>
<body>
<div id="container">
<div id="logo"></div>
<div id="header"></div>
<div id="subnav">
<ul id="subnavlist">
<li id="active"><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

<div id="left">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">A'38</a></li>
<li><a href="#">Fun</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Alumni</a></li>
</ul>
</div>
</div>

<div id="content">

<div id="heading"></div>

<div class="incontent">
<div class="nested"><div align="center"><img src="Images/artwork26.jpg" alt=""></div></div>
<h3>Hello World !</h3>
<p>Yo Guys !!! Wazzup !!? At Last We're Online !!! Sorry banget, tapi seperti yang loe liat bahwa.....yakh.....memang masih belum ada apa - apa disini, gomen !! gomen !!! namanya juga manusia......kan punya kesalahan ^_^ hohohoho ^U^ </p>
<h6>- 9 April 2004, Friday</h6></div>

<div class="incontent">
<div class="nested"><div align="center"><img src="Images/artwork26.jpg" alt=""></div></div>
<h3>I'm Here...And I'm Dead Tired....</h3>
<p>Hmm..capek...jujur aja, gw adalah seorang stupid freak yang perfeksionis. Sebelum loe semua pada bilang "WTF !!!???" akan gw terangkan, bahwa gw adalah seseorang yang gak bakal puas sebelum gw bisa nylesaiin sebuah masalah, dan hal itu juga terkait dengan masalah gw di web. Sebagai seorang web desainer amatir ( Cieeehhhh !!!! ^o^ ), gw gregetan rasanya k'lo masih punya masalah dengan web buatan gw !!! seperti contohnya pada web ini, gw ampe gak tidur cuma karena gw gak bisa nge-tengahin box yang loe liat sekarang ini secara vertikal !!! WTF you said !!!???? Yeah...WTF Indeed...</p>
<h6>- 9 April 2004, Friday</h6></div>

<div class="incontent">
<div class="nested"><div align="center"><img src="Images/artwork26.jpg" alt=""></div></div>
<h3>It's Midnight Folks !</h3>
<p>Hmm...Pointless comment...again...will you kill me ??</p>
<h6>- 10 April 2004, Friday</h6></div>

<div class="incontent">
<div class="nested"><div align="center"><img src="Images/artwork26.jpg" alt=""></div></div>
<h3>It's Midnight past a minute Folks !</h3>
<p>Poison....Please....</p>
<h6>- 10 April 2004, Friday</h6></div>
</div>

<div id="footer"></div>
</div>
</body>
</html>


*****************************************************************************************

And here's the HTML, Messy and confusing right ? I haven't got time to clean it up.....
Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

 IP logged posted posted 05-04-2004 12:11 Edit Quote

Stick the whole thing on a web server and give us a link to it instead...it's much easier to see it in action that way so we can see what's going wrong.


Justice 4 Pat Richard
Veneficuz
Paranoid (IV) Inmate

From: A graveyard of dreams
Insane since: Mar 2001

 IP logged posted posted 05-04-2004 19:54 Edit Quote

Another good thing would be too tell us what is wrong with the page. Since I don't use Windows I can't check how it is supposed to look with IE, and guessing from the results I get with Mozilla or Opera might give me the wrong idea...

Don't know of any tricks to CSS design, except test the page with IE, Mozilla and Opera for about every third line of CSS you write. That way you'll catch the errors early on so they will be easier to fix.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio - Vim Tutorial -


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu