PDA

View Full Version : Problems with Divs and Text in FF

luvhartz
09-19-2005, 04:02 PM
Hi everyone. Ok heres the deal

I made a layout in IE. It was made from Div's without fixed heights.. so it would grow to fit the text, for the whole layout i used 15 DIVs and 9 layers.

So i was proud and happy and started getting some content in. Only to find that in firefox it totally screwed up becaus i had used <p></p> at the beging and end of each DIV and FF was viewing them as making a new line... so it made everything grow too much and it was all overlapping...

I solved the problem by getting rid of the <p></p> tags, but i really dont want it to go to default... so my question. Is there anything i can do to make the text the font i want (arial) that doesnt make the Divs grow?

Thankyou!!!

PS: The page its supposed to look like - http://www.freewebs.com/kdglayouts/right.GIF
The page in FF -
http://www.freewebs.com/kdglayouts/wrong.GIF

See the difference? BTW can anyone look at it in another brouser and tell me or screenshot it if its wrong?

Thanks again, Kerry
MaGiCSuN
09-19-2005, 04:26 PM
i can't tell you if it's right or wrong looking since i don't know the url ..

but have you set "heights" for the "link" boxes ?

Love,
Mirna
luvhartz
09-19-2005, 04:30 PM
no i didnt set the hieght for those but wont that just show the empty space if i do that? i guess theres only one way to find out?

Thanks Magicsun
MaGiCSuN
09-19-2005, 04:42 PM
well i believe someone in another thread answered the same question :)

IE expands to the text, FF expands bigger .. doesn't know where to 'end'

so if you give a height to the boxes it will stay the same in each browser

Love,
Mirna
luvhartz
09-19-2005, 04:50 PM
fraid it didnt work though :( now it just carries on the text outside of the box.. unless i make it scroll i dont see what i can do really
MaGiCSuN
09-19-2005, 04:53 PM
you could start with posting a link to the page so i can see it :)

Love,
Mirna
luvhartz
09-19-2005, 05:15 PM
sorry lol..

Im not sure which one you wanted to see...
IE: http://www.kdglayouts.htmlfaerie.org/mainie.shtml
And, the FF i have taken the <p> tags out of to stop it messing up for now
FF: http://www.kdglayouts.htmlfaerie.org/mainff.shtml
MaGiCSuN
09-19-2005, 05:58 PM
try this:

part one:


<html>
<head>
<title>Welcome to kdglayouts Version 6!</title>
<style type="text/css">
body { scrollbar-arrow-color: #000000; scrollbar-Track-Color: #FFFFCC; scrollbar-Highlight-Color: #FFFFCC; scrollbar-base-color: #FFFFCC; scrollbar-Shadow-Color: #000000; scrollbar-DarkShadow-Color: #000000; font-size: 11pt; font-family: arial; }
a {color: #000000; text-decoration: none; font-family: 'arial narrow'; }
p {font-family: arial; color: #000000; }
.link { width:75px; height: 20px; border: #000000 1px solid; background-color:#ffffCC; }
</style>
</head>
<body background="bk.gif">
<img src="http://www.kdglayouts.htmlfaerie.org/title.GIF" style="position: absolute; top:2px; left:5px">
<div style="overflow: auto; width: 357px; height: 76px; position: absolute; left: 2px; top: 75px; border: #000000 1px solid; background-color: #ffffCC;">
<u>September 19th ? Thanks <a href="http://www.fuuse.net/mirna/" target="_blank">Magicsun</a></u><br>
Today, Today, Today, sigh.. Well first off, I got the main pages onto my new host <a href="http://www.htmlfaerie.org" target="_blank">give her some <3</a> Then I set to work making the FF version so its at least able to use in FF. which is why we should give Magicsun some <3 from LEIAF. Make sure you guys do yeah, cool, <b><3 Webmistress</b><br><br>

<u>September 18th - A paper cliped sunday</u><BR>
so This is it i guess ye olde new-e layout-e lol its not exactly what i had in mind i guess.. it just ended up like this, as my layouts normally do, its not exactly my best work, but yet again im honest enough to say its not my worst either lol. I'm just wondering hwo long it will last argh I'm gettig fed up of it already! wait no, MUST write content! must!!! <3 The Webmistress
</div>



part two will come asap

Love,
Mirna
MaGiCSuN
09-19-2005, 05:59 PM
and part two (paste it after part 1)


<div style="width: 240px; position: absolute; left: 375px; top: 5px; border: #000000 1px solid; background-color:#ffffCC;">
<u>Webmistress</u><br>
Aka "luvhartz" or "the girl who codes layouts" but you can call me the webmistress. Likes spaghetti hoops and penguins, lives in England, <3's Australia, is a Vegetarian, 15 years old, has virgin hair, 5ft5, Free layout coder.
</div>

<div style="width: 245px; position: absolute; left: 625px; top: 5px; border: #000000 1px solid; background-color: #ffffCC;">
<u>This Layout-Moan all you want i dont care if its too big for your res</u><br>It was designed in IE 1024x768 so thats what it will look best in. I just am so glad this place is finally up, view the times section to see what i think of it.
</div>

<div style="overflow: auto; width: 550px; height: 300px; position: absolute; left: 2px; top: 165px; border: #000000 1px solid; background-color: #ffffCC;">
<u>Content</u>
</div>

<div style="width: 112px; height: 20px; position: absolute; left: 570px; top: 156px; border: #000000 1px solid; background-color: #ffffCC; z-index: 1; text-align: center;"><u>Navigation</u></div>

<div style="position: absolute; left:597px; top:175px; z-index:2;" class="link">link</div>
<div style="position: absolute; left:577px; top:190px; z-index:3;" class="link">link</div>
<div style="position: absolute; left:597px; top:205px; z-index:4;" class="link">link</div>
<div style="position: absolute; left:577px; top:220px; z-index:5;" class="link">link</div>
<div style="position: absolute; left:597px; top:235px; z-index:6;" class="link">link</div>
<div style="position: absolute; left:577px; top:250px; z-index:7;" class="link">link</div>
<div style="position: absolute; left:597px; top:265px; z-index:8;" class="link">link</div>
<div style="position: absolute; left:577px; top:280px; z-index:9;" class="link">link</div>

<div align="center" style="width:150; position: absolute; left:700px; top:140px; border: #000000 1px solid; background-color:#ffffCC;">
<u>Free Advertising</u><br>< your button here? ><BR>
<a href="http://www.starlightmks.com/" target="_blank"><img src="http://www.boomspeed.com/starlight/8831.gif" border=0></a><BR>
<a href="http://www.lissaexplains.com" target="_blank"><img src="http://www.kdglayouts.htmlfaerie.org/leia.bmp" width="88" height="31" alt="Lissa Explains it All" border="0"></a><BR>
<a href="http://www.pick-me.net" target="_blank"><img src="http://www.freewebs.com/kdglayouts/pickmebutton.GIF" border="0"></a><br>
<a href="http://www.htmlfaerie.org">My Host</a><br>
< your button here? ><BR>
</div>

<div align="center" style="width:125; position: absolute; left:650px; top:320px; border: #000000 1px solid; background-color:#ffffCC;">
<u>I Can Code:</u><br>
Standard HTML, Tables, Frames, I-frames, DIV's, CSS + Some Java</div>

<div align="center" style="width: 320px; position: absolute; left: 565px; top: 440px; border: #000000 1px solid; background-color:#ffffCC;"><u>Coding by Kerry at kdglayouts, no stealing!</u></div>

</body></html>

i removed all <p> tags, added font arial to the body css AND added heights to the link buttons becuase you didn't do that :)

Love,
Mirna
luvhartz
09-19-2005, 06:22 PM
thanks mirna you rock! do you have a button i can link to your site with i cant seem to see any of your buttons?
MaGiCSuN
09-19-2005, 08:10 PM
yeah i'm working on it right now .. had to fix allot of stuff because i moved to another host

here's a button: http://img.photobucket.com/albums/v447/magicalsun/codes/button1.gif

no problem for helping you out :) that's why we are here haha

Love,
Mirna