CSS problem with dynamic banner

S

sevillad

Hi,

I've started to add CSS to my webpage, and I thought I'd be able to add
a nice dynamic title, with one image on the left, another on the right,
and some plain background in the middle (to allow for windows resize).
Well, it doesn't work well and I don't know why... see four yourselves
(css code included in the file):

http://www.cs.concordia.ca/~dsevilla/test.html

With IE6, the image on the right is displaced down, as if there was an
extra end of line somewhere; there shouldn't be, I've tried removing
every space and line end in the code. With Firefox it's even worse, as
the images are not included in the box (see the border?). I'm ready to
give up on such a complicated goal, but first I'd like to see if
someone can help, I'm pretty sure there's something silly I overlooked.
Or maybe some bug I haven't heard of (I've spent many hours looking for
info online).

Thanks in advance,

David
 
J

Jonathan N. Little

Hi,

I've started to add CSS to my webpage, and I thought I'd be able to add
a nice dynamic title, with one image on the left, another on the right,
and some plain background in the middle (to allow for windows resize).
Well, it doesn't work well and I don't know why... see four yourselves
(css code included in the file):

http://www.cs.concordia.ca/~dsevilla/test.html

With IE6, the image on the right is displaced down, as if there was an
extra end of line somewhere; there shouldn't be, I've tried removing
every space and line end in the code. With Firefox it's even worse, as
the images are not included in the box (see the border?). I'm ready to
give up on such a complicated goal, but first I'd like to see if
someone can help, I'm pretty sure there's something silly I overlooked.
Or maybe some bug I haven't heard of (I've spent many hours looking for
info online).
Click to expand...

Not a bug, you are not implementing your floats correctly. Put the
right-floated image *before* the regular flow text "Personal Page" in
the markup.
 
S

sevillad

Hi,
Not a bug, you are not implementing your floats correctly. Put the
right-floated image *before* the regular flow text "Personal Page" in
the markup.
Click to expand...

Thanks a lot, it works perfectly in IE. On the other hand, in Firefox
the extra line is gone but the text+bg does not extend all the way and
is not centered (the orange box doesn't include the images). Is that
also solvable in a simple way? I'd be more than satisfied if those two
browsers can see my page well.

Thanks,

David
 
J

Jonathan N. Little

Hi,


Thanks a lot, it works perfectly in IE. On the other hand, in Firefox
the extra line is gone but the text+bg does not extend all the way and
is not centered (the orange box doesn't include the images). Is that
also solvable in a simple way? I'd be more than satisfied if those two
browsers can see my page well.
Click to expand...

Well David you have a number of errors that is the cause of your
problems. One of which is your in quirks mode without the doctype and a
few others.

Why are your making DIV title display inline? Removing that helps. Now
to get your title DIV to wrap around the floated images your have three
options I can think of:

1) Explicitly define the 'height' of 'title'
2) Use a clearing element (as you are doing but you are missing the
definition of your 'clearer' class)
3) Make overflow of 'title' DIV auto


CODE try it and see:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>CSS test</title>

<style type="text/css">
#main {width: 100%;}
body {background-color: #999999; margin: 0; padding: 0; }
#bannerleft {float: left; }
#bannerright {float: right; }

#title {
border: 3px coral solid;
width: 100%;
color: blue;
background: #000000 url(arn.gif) repeat-x;
font-size: 35px;
text-align: center;
overflow: auto;
}
</style>

</head>
<body>

<div id="main">
<div id="title">
<img src="test_files/b-l.gif" id="bannerleft" height="90" width="60">
<img src="test_files/b-r.gif" id="bannerright" height="90" width="60">
Personal Page

</div>

</div>

</body></html>
 
S

sevillad

Hi,

I didn't add a doctype because I didn't know which version would be the
one I'm using. I'll read about that (my pages are simple so probably
the one you provide is best anyway).

Yes, I had the code for the clearer but I didn't paste it in the
example... that and the change of order above are exactly what I
needed.

Thanks!!

David
 
J

jojo

I didn't add a doctype because I didn't know which version would be the
one I'm using. I'll read about that (my pages are simple so probably
the one you provide is best anyway).
Click to expand...

Depends on how close your code is to specs. There are a few HTML
elements and attributes you aren't allowed to use with HTML 4.1 *STRICT*.
One example is the definition of the "target" attribute in hyperlinks.
This attribute is part of HTML 4.1 TRANSITIONAL, but not allowed in
STRICT, which means you cannot use frames or open links in new
windows/tabs (target="_blank").
So I don't know if TRANSITIONAL or STRICT is better for you - you decide.

BTW: please don't "top-post", write your own text *below* the quote.
This improves the readability of a thread - top to bottom and not the
way round.
 
J

Jonathan N. Little

jojo said:
Depends on how close your code is to specs. There are a few HTML
elements and attributes you aren't allowed to use with HTML 4.1 *STRICT*.
One example is the definition of the "target" attribute in hyperlinks.
This attribute is part of HTML 4.1 TRANSITIONAL, but not allowed in
STRICT, which means you cannot use frames or open links in new
windows/tabs (target="_blank").
So I don't know if TRANSITIONAL or STRICT is better for you - you decide.
Click to expand...

Since this is a new webpage and David is a newbie I thought it best to
steer hit towards *strict*. Learn to do it the right way from the start
and reserved '*transitional* for preexisting sites where resources to
not allow for a full overhaul.

BTW: please don't "top-post", write your own text *below* the quote.
This improves the readability of a thread - top to bottom and not the
way round.
Click to expand...

Ditto on the top-posting.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Stuck with html and css 25
Working on mobile css menu with plenty of frustration! 2
CSS Grid inside slider not working... 1
Problem with codewars. 5
menu bar and banner responsive issues....any guidance is appreciated! 0
Site Migration Ruined all my CSS?? 8
Flip-Cards with Local Images 1
Problem with KMKfw libraries 1

Members online

No members online now.
Total: 31 (members: 0, guests: 31)
Robots: 482

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top