Jump to content

Web design question


Dowlphin

Recommended Posts

http://mlp.owledge.de

 

It's mainly about the marching ponies.

 

Opera pretty much understands what the absolute bottom of a page is supposed to be, but Firefox seems to leave quite a lot of space at the top and bottom when positioning stuff. The frst text line is supposed to be above Fluttershy's mane, and the second one amidst it. The ponies are supposed to be at the very page bottom.

Don't even get me started with IE. While it gets the text right, the ponies are right below the text lines. But it doesn't display the picture's alhpa channel colors properly.

All three browsers position the background picture precisely where I want it to be, though.

 

I did a lot of trial&error, since I'm not that versed in web design.

This is the code I'm currently using for the body.



<body bgproperties=fixed bgcolor="#F0F0C8" text="#000000" link="#DF75B4" vlink="#DF75B4" alink="#DF75B4">
<font face="Impact, Verdana, Arial, Helvetica, sans-serif" size="18">
<div style="text-align: center; position:top; top:0px;">
<P><B><a href="mlp_anigifs.htm">MLP AniGIFs</a></B></P>
<P><B><a href="mlp_captionpics.htm">MLP caption pictures</a></B></P>
<P><B><a href="various_captionpics.htm">Other caption pictures</a></B></P>
</div>
<div style="position:fixed; left:0px; bottom:0px; width:100%;">
<p><marquee direction="left" scrollamount="3" scrolldelay="10"><img src="http://f.owledge.de/sigs/pixelpony_PP.gif"></img>            <img src="http://f.owledge.de/sigs/pixelpony_FS.gif"></img>           <img src="http://f.owledge.de/sigs/pixelpony_TS.gif"></img></marquee></p>
</div>
</body>

All you have to do is take a bunch of letters! Add it to the thread! Now just take a little something bold, not italic! A bit of underline, just a pinch! Writing these words is such a cinch! Add a teaspoon of punilla! Add a little more, and you count to four, and you always get your filler... Onehundred! So sweet and tasty! Hundred! Don't be too hasty! Hundred! Hundred, hundred, HUNDRED!

PinkiePie_trampoline_sig_cropped.gif

 

"Aw, Pinkie. You have got to stop talking to yourself."
- Pinkie Pie

Link to comment
Share on other sites

 

 

Opera pretty much understands what the absolute bottom of a page is supposed to be, but Firefox seems to leave quite a lot of space at the top and bottom when positioning stuff. The frst text line is supposed to be above Fluttershy's mane, and the second one amidst it. The ponies are supposed to be at the very page bottom.

 

It's just the screen's size. Their position are just right on my Firefox. The ponies are at the very bottom as well. But not when I resize the browser's window. The ponies are at very bottom indeed, no matter how small I resize the window. The problem is that you don't determine the exact size, so your text and ponies adjust their position by themselves. The background image has exact size, but not the text. Therefore, it will move when I resize the window. Giving minimum height to the div that wraps the options will help. Also, try position: relative and give float to the marquee. If resize the window too small, it will block the options and I can't click the link.

 

Other suggestion, separate the marquee into three boxes instead of giving spaces manually. That's not clean. ;)


gYnJwil.gif

 

Pinkeh asked me to put this here. Just another What Do You Think About Me stuff.

Link to comment
Share on other sites

(edited)

Well, the moving when resizing the window is fine. If your Firefox displays it as you say, then I'm wondering what's wrong with mine. I've just updated to version 20 and the text is too low and the ponies are too high, regardless of how I resize the window. There's always a significant space separating the document's top and bottom from the actual browser window top and bottom.

 

Can anybody test it with other browsers? It's IE version 8 that's placing the ponies right below the text on my computer. Also, it shows an empty scroll bar at the right. There's nothing to scroll, but the bar is there, thus the ponies' entry is 'cut short'. On the left side, there's a thing row that covers their exit, too.

Not sure whether that's because marquee is deprecated, but it's still kinda frustrating that browsers interpret a standardized language so differently.

 

firefox.jpg

Edited by Dowlphin

All you have to do is take a bunch of letters! Add it to the thread! Now just take a little something bold, not italic! A bit of underline, just a pinch! Writing these words is such a cinch! Add a teaspoon of punilla! Add a little more, and you count to four, and you always get your filler... Onehundred! So sweet and tasty! Hundred! Don't be too hasty! Hundred! Hundred, hundred, HUNDRED!

PinkiePie_trampoline_sig_cropped.gif

 

"Aw, Pinkie. You have got to stop talking to yourself."
- Pinkie Pie

Link to comment
Share on other sites

Could you please test my current version with various browsers?

 

I added my brand new OC to the main page and at first IE8 moved the text below the OC, then I swapped the order of the div's, and now the OC is below the text, but it's alright. Ideally it's supposed to be left of the text, and my Opera and Firefox understand that.

 

http://mlp.owledge.de/

 

Thanks!


All you have to do is take a bunch of letters! Add it to the thread! Now just take a little something bold, not italic! A bit of underline, just a pinch! Writing these words is such a cinch! Add a teaspoon of punilla! Add a little more, and you count to four, and you always get your filler... Onehundred! So sweet and tasty! Hundred! Don't be too hasty! Hundred! Hundred, hundred, HUNDRED!

PinkiePie_trampoline_sig_cropped.gif

 

"Aw, Pinkie. You have got to stop talking to yourself."
- Pinkie Pie

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Join the herd!

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...