dskaj;h!!!! IE vs. Firefox

caesiusdraco · Post by **caesiusdraco** » Mon Feb 05, 2007 11:11 pm

Sorry. That's the sound of me being really aggravated.

Does anyone have a suggestion of how to get your CSS to look okay in both IE and Firefox?

http://draconigena.sphosting.com/serpen ... index.html

Is what I'm messing with currently. That's the standard of all my layouts.

Yakima · Post by **Yakima** » Mon Feb 05, 2007 11:18 pm

could you post the code for me? It's all confusing jumbled together and I hate taking the stupid box things out...otherwise I'll look at it for you...

caesiusdraco · Post by **caesiusdraco** » Mon Feb 05, 2007 11:37 pm

Here's my CSS:

body {
text-align: center;
background-color: #213D30;
margin: 0px;
}

#main {
width: 740px;
margin-left: auto;
margin-right: auto;
}

.content {
background-color: #A68064;
width:488px;
float: right;
margin-right: 5px;
font-family: Times New Roman;
font-size: 11pt;
color: #000000;
border: 1px solid #000000;
}

.img
{
float: left;
margin-left: 3px;
border: 1px solid #000000;
background-color: #A68064;
}

.sideborder {
background-color: #A68064;
width: 188px;
float: left;
margin-left: 3px;
text-align: left;
padding: 7px;
border: 1px solid #000000;
}

.sidebordertop {
background-color: #996600;
width: 202px;
float: left;
margin-left: 3px;
text-align: center;
border: 1px solid #000000;
}

.insidetop {
background-color: #996600;
width:97%;
float: right;
margin-right: 4px;
text-align: center;
border: 1px solid #000000;
}

.inside {
background-color: #A68064;
width:100%;
padding-top: 10px;
padding-bottom: 10px;
padding: 5px;
text-align: left;
margin-left: auto;
margin-right: auto;
}

a {
color: #000000;
text-decoration: none;
}

a:visited
{
color: #000000;
text-decoration: none;
}

a:active
{
color: #B6C5BE;
text-decoration: none;
font-size: 10pt;
}

a:hover {
color: #B6C5BE;
text-decoration: underline overline;
font-size: 10pt;
}

caesiusdraco · Post by **caesiusdraco** » Mon Feb 05, 2007 11:39 pm

And here's the code, all the <'s replaced.

~html~
~head~~title~.:Aserol:.~/title~
~link rel="stylesheet" href="iic.css" type="text/css"~

~/head~
~body~

~div id="main"~

~div class="content"~
~img src="top.jpg" width="498" height="100"~

~div class="inside"~
~div class="insidetop"~
~em~~b~A Home Away~/b~~/em~
~/div~
~br~~br~
~I~You’re getting slower,~/I~ Strepath reminded him, annoyed.~br~~br~

“Oh, whine, bitch, and moan,” Aserol said as he finally broke the top of the cliff, despite the fact that his lungs burned for air. He really had to get in shape. At least, that’s what everyone told him.~br~

He finally came to rest a few feet from the edge, and put one hand on his dragon’s shoulder. The look Strepath shot him was almost impatient.~br~
Aserol shook his head and caught his breath, and they spent a quiet moment, watching as the sun sank beneath the horizon. Everyone made it out to be some great, romantic affair. It was a momentary thing, really. The sky was all alive with the last slivers of oranges, yellows, and pinks beneath a dark blanket, and then the sun slipped below the horizon and that was it. Alskyr blinked her eye for another day.~br~~br~

~I~But with you, anything romantic is momentary,~/I~ Strepath told him, snorting.~br~~br~

“Hush it beast,” Aserol said, punching him lightly in the shoulder.~br~~br~

~I~I don’t know about our evening ride tonight,~/I~ Strepath said, looking down over the world below. ~I~I don’t feel like having my neck broken.~/I~~br~~br~

~I~If anything breaks your neck, it’ll be your flying,~/I~ he said, flicking some dirt out from underneath a short, jagged fingernail.~br~
~I~So what do you say old boy, ready to waste the evening?~/I~~br~~br~

~I~It’s never a waste,~/I~ the red said and knelt down for his rider to step on board.~br~~br~

Aserol wondered how much easier it all would be if he really did lose weight. But, he liked the shape his gut added to his body. You weren’t half as intimidated by those skinny, muscled dudes as you were to burly ones with meat on them. It was obvious then that they just didn’t give a shit.~br~~br~

Strepath lifted his wings, and plunged off the cliff into the cool night air. The red turned his body upwards, taking off over the acres of forest and plainsland. In the opposite horizon, the first stars were visible against the navy sky, and the land was alive with its own stars: the lights of House and private holdings were aglitter over the landscape. It was breathtaking, really. There was nothing better than ending the day with a beer in your gut and the wind in your hair.~br~~br~

There was a note of alarm that sprang up in his mind, coming from Strepath like the clang of a chime. He followd his red’s gaze down to one of the fire-specks among the landscape. It was a simple campfire in a clearing, the smoke rising as a clear beacon into the sky. Whoever it was obviously wasn’t opposed to being noticed, which was mildly reassuring.~br~
As Strepath dropped in flight, he could see the shadowy figure of one human – and a small one at that, even at their distance.~br~~br~

~I~Let’s land, Strepath,~/I~ Aserol said. ~I~That kid’s gonna get himself eaten by something.~/I~~br~~br~

~Br~~Br~
~div class="insidetop"~
~a href="index.html" onmouseover="window.status='Back to Main';return true" onmouseout="window.status='';return true"~~font color="#000000"~Home~/font~~/a~ | ~a href="#top" onmouseover="window.status='To the Top';return true" onmouseout="window.status='';return true"~~font color="#000000"~Top~/font~~/a~ | ~A href="http://www.geocities.com/dawnlight_crea ... eweyr.html" onmouseover="window.status='Blackstone';return true" onmouseout="window.status='';return true"~~font color="#000000"~Blackstone Weyr~/font~~/a~ | ~A href="http://www.draconigena.net/serpents_reach/" onmouseover="window.status='Serpents Reach';return true" onmouseout="window.status='';return true"~~font color="#000000"~Serpent's Reach~/font~~/a~
~/div~
~br~~br~
~/div~~/div~

~div class="img"~
~img src="side.jpg" width="200" height="100"~
~/div~
~div class="sidebordertop"~
~b~Chapters~/b~:
~/div~
~div class="sideborder"~
~ol~
~li~~a href="index.html" onmouseover="window.status='Chapter One';return true" onmouseout="window.status='';return true"~A Home Away~/a~~/li~
~li~~a href="strepath.html" onmouseover="window.status='Strepath';return true" onmouseout="window.status='';return true"~Strepath~/a~~/li~
~/ol~
~/div~
~div class="sidebordertop"~ ~/div~

~/body~
~/html~

Shard · Post by **Shard** » Mon Feb 05, 2007 11:48 pm

Looks fine in firefox. Myself, I never open IE so wouldn't know or care what it looks like there

Post by **StarFyre** » Tue Feb 06, 2007 12:39 am

Bleh, the main issue is the padding you've declared in "sideborder" -- IE doesn't particular care about standards, so it absorbs padding into the declared width (usually), whereas Firefox (and Opera) adds padding on to the width tag. Effectively, IE is saying "Oh, you want the div to be 188 px? Kay" and Firefox/Opera is saying "Oh, 188 px with 14 px of padding? Kay, that's 202px."

Oh, and in IE, the issue with the second yellow "heading" bar ("sidebordertop" div) at the bottom is because IE is stupid happens to read and display that as a complete section with enough space for text inside it, as opposed to FF/Opera which acknowledges that its an empty div and so makes it basically a line 202px long.

I'm working on it. There are tricks around the padding issue, but pulling them off can be hard. As for the second line... the easiest way is to just remove that declaration.

caesiusdraco · Post by **caesiusdraco** » Tue Feb 06, 2007 12:52 am

Ooh! Good call! Thanks so much StarFyre!

We're fixed now. I just cut the padding out, and put some non-breaking spaces in the bottom div on the sidebordertop. It's still a little off-center in IE, but not as supremely retarded as it used to be.

Thanks a billion!

Post by **StarFyre** » Tue Feb 06, 2007 1:02 am

Another fix is this:

.sideborder {
background-color: #A68064;
width: 202px;
float: left;
margin-left: 3px;
text-align: left;
padding-top: 7px;
padding-bottom: 7px;
border: 1px solid #000000;
}

the only difference is that padding top and bottom are declared instead of overall padding... on the other hand, doing that seems to bump the list a few pixels to the left, but its nothing too drastic.

caesiusdraco · Post by **caesiusdraco** » Tue Feb 06, 2007 1:14 am

Hrm...you know I think I like that better. Thanks.

Post by **StarFyre** » Tue Feb 06, 2007 1:23 am

No problem ^^;; I'm just glad I could help with something, considering how new I am to actually coding with html.

Post by **Dray** » Tue Feb 06, 2007 8:58 am

XD Starfyre, I like how you explain CSS. Could you write us some tutorials? *cackles*

Post by **StarFyre** » Tue Feb 06, 2007 11:28 am

*buh?* >.>;; From what I've seen, most of you are better at coding with CSS (and been doing it longer) than I am. =P Why would you want someone so relatively new to write tutorials?

DNS · Post by **DNS** » Tue Feb 06, 2007 11:34 am

Cuz half of a tutorial is an explination, and if you can explain it in a way that doesn't make people go ???Wtfmate??? then you've got to be doing something right. :3 -hugs-

Xalia · Post by **Xalia** » Tue Feb 06, 2007 11:43 am

Heh, and some of us who have been coding CSS for ages have finally just said "screw that" to making code work in IE...I know /I/ have...IE is just freaking stupid...it doesn't just take the code and /read/ it...it makes assumptions on what it thinks you want that end up screwing up your code if you follow w3 standards...*shakes head*

So yeah, I code and check in Firefox and if it doesn't look right in IE then the people who use IE are out of luck...

Post by **StarFyre** » Tue Feb 06, 2007 11:53 am

Yes, IE is stupid, I'll agree there. But I still try to get it to look right in all three major browsers, FireFox, Opera, and IE. Of course, the best you can really hope for is aproximates, but sometimes that's good enough.

Mainly, that's my outlook because the guy who taught me html and CSS basically said right off that enough people use IE still that I should try to make any public website of mine readable on all three. Of course, he's pushing me to become a website designer as well as a programmer. ^^;;

Xalia · Post by **Xalia** » Tue Feb 06, 2007 12:02 pm

Yes, and when I do something professional I do try to keep IE in mind...but for the Nexus I generally just worry about Firefox because 1. I use it and I think a lot of the Nexus does, and 2. I don't have Opera so I have no idea how anything looks in it and no way to check it... XD

Heh, what is it with guys pushing girls to be programmers? *L*

Post by **StarFyre** » Tue Feb 06, 2007 12:07 pm

I don't know, but it's become his mission to make me learn everything possible, including making and pulling info from databases, which is the current task he set me to this week.

As a general rule of thumb, Opera works like Firefox. There are slight differences, of course, but nothing truly major. I mainly use Opera because its more user-friendly for me, having tried FireFox and gotten horribly lost for some strange reason.

PinkDragon · Post by **PinkDragon** » Tue Feb 06, 2007 1:28 pm

it works fine on firefox

Yakima · Post by **Yakima** » Wed Feb 07, 2007 7:53 pm

Heh...I'm the odd ball then 'cause I do everything in IE and make sure it works in Firefox as I know a lot of people use it. My layouts are simple enough where I don't have to worry about much. I like IE only because you can hit 'Edit in Notepad' from the window rather then right clicking in the file. And my CSS is not that fancy...like this is the basic one for Falas Weyr:

Code: Select all

a:link {
	text-decoration: none; 
	font-size:12px;
	color:#204B7C;
	}
	
	a:visited {
	text-decoration: none; 
	font-size:12px;
	color:#204B7C;
	}

	a:hover {
	text-decoration: none; 
	font-size:12px;
	color:#000000;
        border-bottom:2px solid #204B7C;
        padding:0px;		
	}

a:active {
	text-decoration: none; 
	font-size:12px;
	color:#204B7C;
	}

body { 
    {SCROLLBAR-FACE-COLOR: #204B7C; 
SCROLLBAR-HIGHLIGHT-COLOR: white; 
SCROLLBAR-SHADOW-COLOR: white;
SCROLLBAR-3DLIGHT-COLOR: white; 
SCROLLBAR-ARROW-COLOR:  white; 
SCROLLBAR-TRACK-COLOR: white;
SCROLLBAR-DARKSHADOW-COLOR: white; 
background-color: #FFFFFF;}

body 
{background-color: #ffffff;
font-family: Verdana; 
color: #000000;
letter-spacing: 0px; 
font-weight: normal; 
font-size: 12px;
cursor: default;}

td 
{font-family: Verdana; 
color: #000000;
letter-spacing: 0px; 
font-weight: normal; 
font-size: 12px;
cursor: default;}
--> 

.form {font-family: Verdana, sans-serif; font-size:12; color:#204B7C; background-color:#FFFFFF; border-bottom: 2px #204B7C solid; border-right: 0px #FFFFFF solid; border-top: 0px #FFFFFF solid; border-left: 0px #FFFFFF solid; }

.form2 {font-family: Verdana, sans-serif; font-size:12; color:#204B7C; background-color:#FFFFFF; border-bottom: 1px #204B7C solid; border-right: 1px #204B7C solid; border-top: 1px #204B7C solid; border-left: 1px #204B7C solid; }

.form3 {font-family: Verdana, sans-serif; font-size:12; color:#000080; background-color:#FFFFFF; border-bottom: 0px #204B7C solid; border-right: 0px #000080 solid; border-top: 0px #000080 solid; border-left: 0px #000080 solid; }

I use a code thingy to link all my pages to this so that I don't have to go through and change every single pages code for the scroll bar and such. Firefox makes me change the background manually and it dosn't even read scroll bar changes but that isn't a big deal for the most part.