Problem with right-floating image

[Martin Clark]

Hello, I am daring to stick my head above the parapet and ask as
question. I am working on redesigning a website to use CSS rather than
tables for layout. I have come across a problem when trying to float an
image to the right.

For ease of looking at the problem, I have stripped away other parts of
the page layout, and have just included the "content" section in the
examples below.

The basic design of having a left column and a main column works fine in
this example:
http://www.penninewaterways.co.uk/testpage1.htm
You will see that I have added a background colour to the headings.

The problem comes when I add a right-floated <divcontaining an image:
http://www.penninewaterways.co.uk/testpage2.htm

This appears in IE6 in the way I expected it, but in Firefox, which of
course renders the CSS correctly, although the text flows around the
image, the background colour overlaps it.

This can be partly solved by adding z-index: 100; to the CSS for
..imageright but the bands of background colour still extend beneath the
image and look silly.

Is there a way to get the background colour of the headings to stop
short of the image <divin the way that it apparently does in IE6?
Or is it only text that can be flowed around a floating element?

The CSS file is http://www.penninewaterways.co.uk/testcss.css
--
Martin Clark

[Spartanicus]

Martin Clark <ma****@spl.atwrote:

>Is there a way to get the background colour of the headings to stop
short of the image <divin the way that it apparently does in IE6?

By giving the header a left or right margin equal to the horizontal size
of the float and it's horizontal padding, margin and/or border.

This is not only often awkward to code for various reasons, it doesn't
work if the float and the header aren't always fully adjacent in the
vertical plane.

>Or is it only text that can be flowed around a floating element?

Only inline content flows around a float.

--
Spartanicus

[Gus Richter]

Martin Clark wrote:

>
Is there a way to get the background colour of the headings to stop
short of the image <divin the way that it apparently does in IE6?
Or is it only text that can be flowed around a floating element?

H1 is a block and a block element takes up the whole remaining width,
therefore the background extends to the right margin. Declaring it as
inline limits the background color to the element itself.

Declaring H1 with position:relative causes it to have a higher z-index
value than the image and the background color is over the image.

There is no reason to declare position:relative; for .main, h1, or
..imageright .

Use these three modified declarations:

..main {margin: 1em 2% 0 34%; padding: 0 0 0 1em;}
..main h1 {display:inline;background-color:#e5ebc8; font-family: Arial,
Helvetica, sans-serif; font-size: 100%; font-weight: 600;
text-align:left; padding: 0.1em 0.2em 0.1em 0.5em; margin: 0.1em;
border: 0;}
..imageright {float: right; width: 175px; margin-left: 0.7em; margin-top:
0.2em; padding: 0.1em; }

--
Gus

[Martin Clark]

Gus Richter wrote...

>Martin Clark wrote:

> Is there a way to get the background colour of the headings to stop
short of the image <divin the way that it apparently does in IE6?
Or is it only text that can be flowed around a floating element?

There is no reason to declare position:relative; for .main, h1, or
.imageright .

Use these three modified declarations:

[snip]

Thanks for the help. I have tied that out and the result is here:
http://www.penninewaterways.co.uk/testpage2a.htm

This keeps the coloured background just to the area of the <h1text.
This is a solution that I will consider, although it does not give the
effect I was hoping for. I would have preferred the coloured background
to extend rightwards from the text (although not into the area of the
floated image). I'm not sure that it would look good when the headings
are all of different lengths.

Thanks for the suggestion, anyway. I may go with it but I will look at
any other options first!
--
Martin Clark

[Martin Clark]

Spartanicus wrote...

>Martin Clark <ma****@spl.atwrote:

>>Is there a way to get the background colour of the headings to stop
short of the image <divin the way that it apparently does in IE6?

By giving the header a left or right margin equal to the horizontal size
of the float and it's horizontal padding, margin and/or border.

This is not only often awkward to code for various reasons, it doesn't
work if the float and the header aren't always fully adjacent in the
vertical plane.

Thanks for your help, Spartanicus. I have tried this out but, of course,
all the <h1lines were of the same (shorter) length right down the
page, which looked odd in the area below the floated image.

I have combined your suggestion for the <h1element with new <h2>
elements which do not have the wider right margin and the result is:
http://www.penninewaterways.co.uk/testpage3.htm
which seems to produce the effect I want.

The problem is that as I add new items to the top I will have to change
the tags from <h1 to <h2for the items that move down.

This works but seems a little messy. Any comments?

>>Or is it only text that can be flowed around a floating element?

Only inline content flows around a float.

Thanks for making that clear for me.
--
Martin Clark

[Beauregard T. Shagnasty]

Martin Clark wrote:

I have combined your suggestion for the <h1element with new <h2>
elements which do not have the wider right margin and the result is:
http://www.penninewaterways.co.uk/testpage3.htm
which seems to produce the effect I want.

The problem is that as I add new items to the top I will have to change
the tags from <h1 to <h2for the items that move down.

Hopefully, in your final draft, you will have only one <h1and the rest
will all be <h2>. As I see it, there should be one major <h1heading
*above* all those "Headline - Reports and Photos" groups, which should
all be <h2>. Or <h3if there are any sub-groups - think of it as an
"outline" like you did in middle school.

A.
1.
2.
a.
b.
3. ...

You need to take care of these errors as well:
<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.penninewaterw ays.co.uk%2Ftestpage3.htm>

In your CSS, you don't need to repeat font-family unless you change it.
Also don't need to show default state such as
"text-decoration:underline;" for links.

Colors also need a background color assigned, even it if is
"transparent".

--
-bts
-This message has been tested for polonium-210 and found to be safe

[Spartanicus]

Martin Clark <ma****@spl.atwrote:

>I have combined your suggestion for the <h1element with new <h2>
elements which do not have the wider right margin and the result is:
http://www.penninewaterways.co.uk/testpage3.htm
which seems to produce the effect I want.

It doesn't work properly due to the problem I described earlier, narrow
the viewport to see the effect.

>This works but seems a little messy. Any comments?

A better approach for the situation above is to have the float mask the
header background. You do this by defining a padding (left padding if
the float is to the right) and by setting the background colour of the
float to the body background colour. This requires that the floated
element doesn't have a CSS border, so you can't for example float an
image whilst specifying a border around it with CSS, you'd either need
to make the border part of the image itself, or use a wrapper element,
float that instead and specify the padding on the wrapper element.

--
Spartanicus

[Martin Clark]

Beauregard T. Shagnasty wrote...

>Martin Clark wrote:

>The problem is that as I add new items to the top I will have to change
the tags from <h1 to <h2for the items that move down.

Hopefully, in your final draft, you will have only one <h1and the rest
will all be <h2>. As I see it, there should be one major <h1heading
*above* all those "Headline - Reports and Photos" groups, which should
all be <h2>. Or <h3if there are any sub-groups

Yes, of course. As I said in my original post, I have stripped out the
rest of the page. These will probably end up being <h3and <h4in the
final draft.

I was thinking about using <p class="something"and <p
class="something2"instead for these but I understand there are
advantages to using <h*for headings.

>
You need to take care of these errors as well:
<http://validator.w3.org/check?verbos...Fwww.penninewa
terways.co.uk%2Ftestpage3.htm>

Ooops! How silly of me! I altered the start tags to <h2but left the
close tags as </h1>. I had, of course, validated the original version of
the page before I posted here! Sorry about that!

>In your CSS, you don't need to repeat font-family unless you change it.
Also don't need to show default state such as
"text-decoration:underline;" for links.

Okay, thanks. Just me being verbose as usual.

>Colors also need a background color assigned, even it if is
"transparent".

How do you mean? I though "transparent" was the default? Can you give me
an example of what you mean, please?
--
Martin Clark

[Gus Richter]

Martin Clark wrote:

>
Thanks for the help. I have tied that out and the result is here:
http://www.penninewaterways.co.uk/testpage2a.htm

This keeps the coloured background just to the area of the <h1text.
This is a solution that I will consider, although it does not give the
effect I was hoping for. I would have preferred the coloured background
to extend rightwards from the text (although not into the area of the
floated image). I'm not sure that it would look good when the headings
are all of different lengths.

In that case, leave H1 'static' and define its width, which it does
take. Make only this change, which removes display:inline; and give it
a width as desired. Here I give it 65%.

..main h1 {width:65%;background-color:#e5ebc8; font-family: Arial,
Helvetica, sans-serif; font-size: 100%; font-weight: 600;
text-align:left; padding: 0.1em 0.2em 0.1em 0.5em; margin: 0.1em;
border: 0;}

--
Gus

[Beauregard T. Shagnasty]

Martin Clark wrote:

Beauregard T. Shagnasty wrote...

>snip

I was thinking about using <p class="something"and <p
class="something2"instead for these but I understand there are
advantages to using <h*for headings.

We suspect that google pays higher attention to well-keyworded headings.
<g>

>Colors also need a background color assigned, even it if is
"transparent".

How do you mean? I though "transparent" was the default? Can you give
me an example of what you mean, please?

Note the warnings:
<http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2F www.penninewaterways.co.uk%2Ftestpage3.htm>

Even if transparent is the default, my browser may have another color
assigned in my local CSS. You stand the best chance of having the page
rendered as you intend, if you always assign color with
background-color.

--
-bts
-This message has been tested for polonium-210 and found to be safe

[Martin Clark]

Beauregard T. Shagnasty wrote...

>Martin Clark wrote:

>Beauregard T. Shagnasty wrote...

>>Colors also need a background color assigned, even it if is
"transparent".

How do you mean? I though "transparent" was the default? Can you give
me an example of what you mean, please?

Note the warnings:
<http://jigsaw.w3.org/css-validator/v...2&warning=2&ur
i=http%3A%2F%2Fwww.penninewaterways.co.uk%2Ftestp age3.htm>

Hmm, yes and I see there are similar warnings if you validate w3.org's
own pages!

>Even if transparent is the default, my browser may have another color
assigned in my local CSS. You stand the best chance of having the page
rendered as you intend, if you always assign color with
background-color.

So, if I have" "color" and "background-color" defined for "body" then I
would need to use "transparent" as a background colour for individual
elements? W3.ord mentions a, a:hover, <h1and <h2>. Is it not needed
for <por is it inherited from the .left and .main containers??

Do I use "background: transparent;" or "background-color: transparent;"?
--
Martin Clark

[Martin Clark]

Gus Richter wrote...

>Martin Clark wrote:

> Thanks for the help. I have tied that out and the result is here:
http://www.penninewaterways.co.uk/testpage2a.htm
This keeps the coloured background just to the area of the <h1>
text.
This is a solution that I will consider, although it does not give the
effect I was hoping for. I would have preferred the coloured background
to extend rightwards from the text (although not into the area of the
floated image). I'm not sure that it would look good when the headings
are all of different lengths.

In that case, leave H1 'static' and define its width, which it does
take. Make only this change, which removes display:inline; and give
it a width as desired. Here I give it 65%.

.main h1 {width:65%;background-color:#e5ebc8; font-family: Arial,
Helvetica, sans-serif; font-size: 100%; font-weight: 600; text-
align:left; padding: 0.1em 0.2em 0.1em 0.5em; margin: 0.1em; border:
0;}

That would make the coloured backgrounds 65% of the width of the .main
<div>?
--
Martin Clark

[Bergamot]

Martin Clark wrote:

>
The problem comes when I add a right-floated <divcontaining an image:
http://www.penninewaterways.co.uk/testpage2.htm

This appears in IE6 in the way I expected it, but in Firefox, which of
course renders the CSS correctly, although the text flows around the
image, the background colour overlaps it.

I think what you want is a combo of the various ideas you've gotten so far.

- Remove position:relative from .main h1
- Remove the margins from .imageright - make them padding instead
- Assign background-color:#ffffea; to .imageright (and color:#000;)

--
Berg

[Gus Richter]

Martin Clark wrote:

Gus Richter wrote...

>Martin Clark wrote:

>> Thanks for the help. I have tied that out and the result is here:
http://www.penninewaterways.co.uk/testpage2a.htm
This keeps the coloured background just to the area of the <h1>
text.
This is a solution that I will consider, although it does not give the
effect I was hoping for. I would have preferred the coloured background
to extend rightwards from the text (although not into the area of the
floated image). I'm not sure that it would look good when the headings
are all of different lengths.

In that case, leave H1 'static' and define its width, which it does
take. Make only this change, which removes display:inline; and give
it a width as desired. Here I give it 65%.

.main h1 {width:65%;background-color:#e5ebc8; font-family: Arial,
Helvetica, sans-serif; font-size: 100%; font-weight: 600; text-
align:left; padding: 0.1em 0.2em 0.1em 0.5em; margin: 0.1em; border:
0;}

That would make the coloured backgrounds 65% of the width of the .main
<div>?

As I said in my first article:
"H1 is a block and a block element takes up the whole remaining
width, therefore the background extends to the right margin."

Therefore 100% width (defined or if none declared then 100% is the
default) on H1 results in the background color extending from its left
edge to the right margin.

Try width:50%; and see it cover half of the H1 block width.

--
Gus

[Martin Clark]

Gus Richter wrote...

>Martin Clark wrote:

>That would make the coloured backgrounds 65% of the width of the .main
<div>?

As I said in my first article:
"H1 is a block and a block element takes up the whole remaining
width, therefore the background extends to the right margin."

Therefore 100% width (defined or if none declared then 100% is the
default) on H1 results in the background color extending from its left
edge to the right margin.

Try width:50%; and see it cover half of the H1 block width.

Thanks for clarifying that, Gus.

I have been working on Spartanicus's alternative idea of setting a
background colour for the floating element, which seems to be doing the
trick by hiding the heading backgrounds in the area of the photo.
--
Martin Clark

[Martin Clark]

Bergamot wrote...

>Martin Clark wrote:

>>
The problem comes when I add a right-floated <divcontaining an image:
http://www.penninewaterways.co.uk/testpage2.htm

This appears in IE6 in the way I expected it, but in Firefox, which of
course renders the CSS correctly, although the text flows around the
image, the background colour overlaps it.

I think what you want is a combo of the various ideas you've gotten so far.

Yes, you are right. Before I read your post, I had been working on
Spartanicus's idea of setting a background colour for the floating
object, and with a bit of tweaking and combining various suggestions, I
think I have come up with something that does what I want:
http://www.penninewaterways.co.uk/testpage3a.htm

Thank you all for your comments and ideas.
--
Martin Clark

[Gus Richter]

Martin Clark wrote:

Gus Richter wrote...

>Martin Clark wrote:

>>That would make the coloured backgrounds 65% of the width of the .main
<div>?

As I said in my first article:
"H1 is a block and a block element takes up the whole remaining
width, therefore the background extends to the right margin."

Therefore 100% width (defined or if none declared then 100% is the
default) on H1 results in the background color extending from its left
edge to the right margin.

Try width:50%; and see it cover half of the H1 block width.

Thanks for clarifying that, Gus.

I have been working on Spartanicus's alternative idea of setting a
background colour for the floating element, which seems to be doing the
trick by hiding the heading backgrounds in the area of the photo.

As they say, there are many ways to skin a cat.

--
Gus

[Gus Richter]

Martin Clark wrote:

>
Thank you all for your comments and ideas.

I looked at the webpage http://www.penninewaterways.co.uk/ which it
would seem you are "redesigning using CSS rather than tables for layout".

The site actually does not have the requirements that you have been
requesting.
It is a simple three-column layout.
The left column floated left, the third column (containing images)
floated right and the middle column flowing between the two.
Much simpler than what you have been requesting.
Your approach is unnecessarily complicated.

--
Gus

[Martin Clark]

Gus Richter wrote...

>Martin Clark wrote:

> Thank you all for your comments and ideas.

I looked at the webpage http://www.penninewaterways.co.uk/ which it
would seem you are "redesigning using CSS rather than tables for
layout".

The site actually does not have the requirements that you have been
requesting.
It is a simple three-column layout.
The left column floated left, the third column (containing images)
floated right and the middle column flowing between the two.
Much simpler than what you have been requesting.
Your approach is unnecessarily complicated.

Thank you for your observations, Gus, and for taking the time to look at
what I am doing.

I am not trying to reproduce exactly the existing home page. I am
experimenting with changing the design a little. The page has a lot of
smallish text. I am looking at increasing the font size but this would
make the page too long unless I removed a lot of the older links. I am
experimenting with a basic two-column layout with the addition of a
floating image to add a little interest and colour.

The present layout is a traditional table soup! The main area really
consists of two main columns. Then the right hand column is then divided
into two sub-columns between the date/drop down menu line and the
section with the web ring panel. The images on the right serve no
purpose other than providing colour and a little decoration! Such
complications of layout are easy with tables but more of a problem with
CSS, which is another reason I am not looking at just replicating the
current page.

I am attempting to match the style that I have already developed on the
main pages of each sub-section of the site, such as
http://www.penninewaterways.co.uk/bridgewater/index.htm
http://www.penninewaterways.co.uk/ashton/index.htm
These pages also have a floating image on the right, so having something
similar on the home page would be more consistent.
--
Martin Clark

[Martin Clark]

Martin Clark wrote...

>Bergamot wrote...

>>I think what you want is a combo of the various ideas you've gotten so far.

Yes, you are right. Before I read your post, I had been working on
Spartanicus's idea of setting a background colour for the floating
object, and with a bit of tweaking and combining various suggestions, I
think I have come up with something that does what I want:
http://www.penninewaterways.co.uk/testpage3a.htm

I have now added to the above page the code for the rest of the home
page. Some of you (Gus, at least!), may be interested to see how it fits
in with the whole page. There is still some tinkering and tweaking to be
done, but I am fairly happy with the way it is looking so far:
http://www.penninewaterways.co.uk/newindex.htm

A new problem has appeared now! The headings for the news items on the
right hand side of the page are showing an underline in Firefox,
although text-decoration: none has been specified.
( .main h3 a {text-decoration: none;} )
The underline does not appear in IE6.

This problem did not happen with http://www.penninewaterways.co.uk/testp
age3a.htm and the code is almost the same. I can't see where I have gone
wrong. Any ideas? The html and css both validate.
--
Martin Clark

[Beauregard T. Shagnasty]

Martin Clark wrote:

A new problem has appeared now! The headings for the news items on the
right hand side of the page are showing an underline in Firefox,
although text-decoration: none has been specified.
( .main h3 a {text-decoration: none;} )
The underline does not appear in IE6.

Please see: http://www.cs.tut.fi/~jkorpela/www/links.html

I rather like the link underline. I don't have to move the ol' mouse
around to see what else is available; I know instantly that something
that is underlined is a *link*.

--
-bts
-Motorcycles defy gravity; cars just suck

[Martin Clark]

Beauregard T. Shagnasty wrote...

>Martin Clark wrote:

>A new problem has appeared now! The headings for the news items on the
right hand side of the page are showing an underline in Firefox,
although text-decoration: none has been specified.
( .main h3 a {text-decoration: none;} )
The underline does not appear in IE6.

Please see: http://www.cs.tut.fi/~jkorpela/www/links.html

I rather like the link underline. I don't have to move the ol' mouse
around to see what else is available; I know instantly that something
that is underlined is a *link*.

Yes, thanks for the link. I am aware of the differences of opinion about
underlining links. For better or worse I made the decision that I wanted
that particular class of link to have no underline.

Having decided that, I find that they are underlined in Firefox and I
can't see why. Doesn't anybody know why this is happening?

In my defence I would point out that there are plenty of major sites
that have most links not underlined! (e.g. http://www.bbc.co.uk
http://www.yahoo.com )
--
Martin Clark

[Gus Richter]

Martin Clark wrote:

Beauregard T. Shagnasty wrote...

>Martin Clark wrote:

>>A new problem has appeared now! The headings for the news items on the
right hand side of the page are showing an underline in Firefox,
although text-decoration: none has been specified.
( .main h3 a {text-decoration: none;} )
The underline does not appear in IE6.

I am aware of the differences of opinion about
underlining links. For better or worse I made the decision that I wanted
that particular class of link to have no underline.

Having decided that, I find that they are underlined in Firefox and I
can't see why. Doesn't anybody know why this is happening?

In newcss.css modify the following declaration per:

h3 {padding: 0 0 0 0; margin: 0 0 0 0; font-size: 115%; font-weight: 600;
/*text-decoration:underline;*/ }

--
Gus

[Gus Richter]

Martin Clark wrote:

>>A new problem has appeared now!

I find that they are underlined in Firefox and I
can't see why. Doesn't anybody know why this is happening?

It occurs to me that you should get the Fx extension that I have been using.

It's called *Web Developer* which adds a menu and a toolbar with various
web developer tools.

--
Gus

[Martin Clark]

Gus Richter wrote...

>Martin Clark wrote:

>>>A new problem has appeared now!

I find that they are underlined in Firefox and I
can't see why. Doesn't anybody know why this is happening?

It occurs to me that you should get the Fx extension that I have been using.

It's called *Web Developer* which adds a menu and a toolbar with
various web developer tools.

Thank you for that suggestion. I have the Web Developer extension and it
is indeed very useful.

It didn't help me in this case because I thought that .main h3 {...]
would over-ride the original h3 properties when the h3 appeared within a
..main div. This seems to work in some situations.
--
Martin Clark

[Martin Clark]

Gus Richter wrote...

>Martin Clark wrote:

>Beauregard T. Shagnasty wrote...

>>Martin Clark wrote:
A new problem has appeared now! The headings for the news items on the
right hand side of the page are showing an underline in Firefox,
although text-decoration: none has been specified.
( .main h3 a {text-decoration: none;} )
The underline does not appear in IE6.

I am aware of the differences of opinion about
underlining links. For better or worse I made the decision that I wanted
that particular class of link to have no underline.
Having decided that, I find that they are underlined in Firefox and
I
can't see why. Doesn't anybody know why this is happening?

In newcss.css modify the following declaration per:

h3 {padding: 0 0 0 0; margin: 0 0 0 0; font-size: 115%; font-weight: 600;
/*text-decoration:underline;*/ }

Thanks, Gus. That did the job.

I thought that re-specifying the h3 properties under .main
( as in .main h3 {...} ) over-rides the original properties?

In other words, I thought that .main h3 {text-decoration:none;} would
take precedence over the earlier h3 {text-decoration:underline;} ?

The style sheet is intended to work over a range of pages so the
original h3 applied to some other pages whereas .main h3 just applies
to this page (and any others in future that use .man).

Sorry, Beauregard, I know you don't like it, but I much prefer the
appearance of these particular links without the underlines! The font-
weight: 600 made the underlines rather over-powering.
--
Martin Clark

[Gus Richter]

Martin Clark wrote:

Gus Richter wrote...

>Martin Clark wrote:

>>Beauregard T. Shagnasty wrote...
Martin Clark wrote:
A new problem has appeared now! The headings for the news items on the
right hand side of the page are showing an underline in Firefox,
although text-decoration: none has been specified.
( .main h3 a {text-decoration: none;} )
The underline does not appear in IE6.
I am aware of the differences of opinion about
underlining links. For better or worse I made the decision that I wanted
that particular class of link to have no underline.
Having decided that, I find that they are underlined in Firefox and
I
can't see why. Doesn't anybody know why this is happening?

In newcss.css modify the following declaration per:

h3 {padding: 0 0 0 0; margin: 0 0 0 0; font-size: 115%; font-weight: 600;
/*text-decoration:underline;*/ }

Thanks, Gus. That did the job.

I thought that re-specifying the h3 properties under .main
( as in .main h3 {...} ) over-rides the original properties?

In other words, I thought that .main h3 {text-decoration:none;} would
take precedence over the earlier h3 {text-decoration:underline;} ?

Apples and oranges.

In the one instance you declare it on the anchor and not h3:
..main h3 a {text-decoration: none;}

In the other you declare it on h3:
h3 {padding: 0 0 0 0; margin: 0 0 0 0; font-size: 115%; font-weight: 600;
text-decoration:underline;}

--
Gus

[Martin Clark]

Gus Richter wrote...

>Martin Clark wrote:

>>>

Thanks, Gus. That did the job.
I thought that re-specifying the h3 properties under .main
( as in .main h3 {...} ) over-rides the original properties?
In other words, I thought that .main h3 {text-decoration:none;}
would
take precedence over the earlier h3 {text-decoration:underline;} ?

Apples and oranges.

In the one instance you declare it on the anchor and not h3:
.main h3 a {text-decoration: none;}

In the other you declare it on h3:
h3 {padding: 0 0 0 0; margin: 0 0 0 0; font-size: 115%; font-weight: 600;
text-decoration:underline;}

Yes, sorry. Not paying attention! Thank you for the help.
--
Martin Clark

[Beauregard T. Shagnasty]

Martin Clark wrote:

Sorry, Beauregard, I know you don't like it, but I much prefer the
appearance of these particular links without the underlines! The
font- weight: 600 made the underlines rather over-powering.

No need to apologize. :-)

Something else has now gone awry in Firefox. On the page
http://www.penninewaterways.co.uk/newindex.htm
I see a horizontal scrollbar, no matter how wide the window is.

I do not see the scrollbar in Opera.

--
-bts
-Motorcycles defy gravity; cars just suck

[Martin Clark]

Beauregard T. Shagnasty wrote...

>Martin Clark wrote:

>Sorry, Beauregard, I know you don't like it, but I much prefer the
appearance of these particular links without the underlines! The
font- weight: 600 made the underlines rather over-powering.

No need to apologize. :-)

Something else has now gone awry in Firefox. On the page
http://www.penninewaterways.co.uk/newindex.htm
I see a horizontal scrollbar, no matter how wide the window is.

I do not see the scrollbar in Opera.

I do not see a horizontal scrollbar with Firefox in a screen resolution
of 1024x768, no matter how wide the window, but I do see it in a screen
resolution of 1289x960.

I think I may have solved the problem by adding clear:both; to .footer -
I don't know why I didn't do that before!
--
Martin Clark

[Beauregard T. Shagnasty]

Martin Clark wrote:

Beauregard T. Shagnasty wrote...

>Something else has now gone awry in Firefox. On the page
http://www.penninewaterways.co.uk/newindex.htm I see a horizontal
scrollbar, no matter how wide the window is.

I do not see the scrollbar in Opera.

I do not see a horizontal scrollbar with Firefox in a screen
resolution of 1024x768, no matter how wide the window, but I do see
it in a screen resolution of 1289x960.

Didn't matter the window width during my test. "Screen resolution" is
unimportant; browser window size is.

I think I may have solved the problem by adding clear:both; to
.footer - I don't know why I didn't do that before!

The scrollbar in Fx is now gone. Good doggie! ;-)

--
-bts
-Motorcycles defy gravity; cars just suck

[Bergamot]

Martin Clark wrote:

>
I have the Web Developer extension and it
is indeed very useful.

It didn't help me in this case because I thought that .main h3 {...]
would over-ride the original h3 properties

Next time you might try using the DOM inspector. You can look at
everything in the tree and see what style rules are assigned to each
element. You may have noticed that the underline was being applied to
the h3 element itself, not the child a element.

--
Berg