Links in floating div don’t work in Firefox

Have we run in problems with links in floats in Firefox? No. Your style url seems to be wrong.

Maybe you haven’t…..

And what do you mean the style url is wrong. I just checked both the CSS and HTML two minutes ago and everything validates. Maybe you caught it in between uploads. I’m working on it, as mentioned, even as I type…hee hee.

It’s not just that div box container. I have a bunch of them styled all differently that also don’t feature functioning links. Yet, everything validates. This is very odd.

I do not know whether wrong is the right word. I just cant get the CSS. 404.

Did you try again? I’ll leave it alone for a little bit.

If you can’t get the CSS file, which might happen because I have most of the site blocked to public access, though I’ve been able to see it, here is the CSS for the two toned box (I’ve removed the fonts to shrink the code down):

.boxblue {float:right; width:30%; margin-top:3px; }
.boxblue div.bluetitle {background:#000099; color:white; font-size:15px; line-height:22px; z-index:1}
.boxblue div.bluetitle span {padding:2px 3px; background:#0000FF; text-transform:uppercase; letter-spacing:0.1em; font-weight:bold}
.boxblue div.bluebody {margin:0 0 0 1.5em; padding:10px; background:#000099; color:white; font-size:90%}
.boxblue div.bluebody span {font-variant:small-caps; font-weight:bold; color:#99FFFF}
.boxblue ul, .boxtip ul {margin:0 0 0 -20px; list-style: url(ball1.gif) square inside; font-size:90%}
.boxblue li, .boxtip li {margin:0}
.bluebody a:link {position:relative; color:#99FFFF}
.bluebody a:visited {color:#99FFFF}
.bluebody a:hover {color:navy}

And the HTML is:

<div class="boxblue">
<div class="bluetitle">
<span>Read a Book</span>
</div>
<div class="bluebody">We have <a title="list of recommended books" href="read.html">list of books</a> that ...inspire us.</div>
</div>

I got a version of your site downloaded about 45 minutes ago and started picking apart the HTML and CSS.

Your HTML is fine, it’s the CSS screwing you up. The first thing I found was that Firefox didn’t like the “float:right;”. Which isn’t the problem, Floats normally work just fine in FF. So I went deeper into your CSS. It appears that all of the browser hacks you have are causing the problem. When I removed those, the link worked fine.

Which presents a little of a conundrum, remove the hacks and screw up some people, or leave them in and screw up others.

My solution would be to redo your CSS. Going through your CSS, it appears to me that there is a lot of bloat. Your CSS is well over 500 lines and the complexity is way more than you need. I think that if you clean up your CSS and simplify your coding you won’t need the browser hacks. On my sites I stay away from the browser hacks. There isn’t anything high-tech on your site that requires a mass of hacks (and if there were I’d recommend doing a redesign anyway). Where you are using DIVs and SPANs to style headlines and text you should simplify and use Hn & P tags.

Your site looks interesting, I’d like to blog it when you get it finished.

Thanks for taking the time to dig into this. And as you know, under construction and test site means just that. Of course there is bloat. Tons of it. Part of the process. I’m in the process of the redesign, design from scratch, starting over, etc. I didn’t even want to give out the link but I can’t stand the whiners on the forum who have to have it before answering a question.

I only have two hacks. One of those is applied to the box in question, and when I remove that, everything is still the same on the page. Still no functioning link.

The other hack is applied only to the excerpt and the problem I’m having is outside of that hack totally. The hack solves the float container height and has to be there.

Besides the commented out stuff, of which there is tons left over from the old site CSS and the WordPress theme stuff, can you tell me which “hacks” you removed that made the difference? The whole thing validates, which is amazing with all the gunk in there. That might help me narrow this down.

As for headlines? Can you be specific? In the float box, there are no headlines, just titles.

Either you got a fix just that quick or my mind is playing tricks on me but all your links worked fine in FF, cool site BTW

At positioniseverything.net (a link I just stole from another thread) they explain that:

True, IE/Win does enclose a float within a container ‘automatically’, but only if the container element has a stated dimension, and in any case it’s a W3C spec violation. This illegal behavior can also be ‘toggled’ on and off by links within the container, if ‘hovering’ alters the link background or several other properties. Quite a mess.

They then go on to state that Mozilla is sensitive to these kinds of things. You have hovering specced in your CSS. Turning hovering off might solve the problem.

Give me a few minutes and I’ll get you info about what I deleted in your stylesheet. I don’t have the originals and need to recreate what I did.

Sort of funny how life works. While taking apart your style sheet I saw some stuff and wondered why in the world you had put that in. So, without a second thought, I removed it. Then I removed the various hacks. It wasn’t the hacks, it was this block of CSS code:

a, .boxtip, .boxes, .boxright, .boxleft, .boxwide, .boxblue, .boxquote, .bluebody, p, li, li li, li li li, ul, ul ul, ul ul ul, h3, h1, h2, h4, h5, dl, dd, dt, blockquote, .boxleft p, .boxright p, .boxwide p, .boxright ul, .boxleft ul, .boxwide ul, .tiptitle, .tipbody, .tipbody ul, .bluetitle, .bluebody ul, span {position:relative}

If I knew you I would lecture on the dangers of willy-nilly throwing stuff into a stylesheet, but I don’t, so I won’t. I will just say that you do a lot of default setting that doesn’t do you any good. I do apologize for any previous snarkiness I might have had also.

What I meant previously about styling your headlines, is that your HTML and CSS would be much cleaner if you styled the bluebox like this:

<div class="boxblue">
<h2>Read a Book</h2>
<p>We have ...

Instead of:

<div class="boxblue">
<div class="bluetitle">
<span>Read a Book</span>
</div>
<div class="bluebody">
We have ...

No snarkyness anywhere here. Just learning from each other. The long list of position:relative is left over from the old site, which required it to work on MSIE before v6.1….painful stuff.

As for headings, W3C standards has a very definite order about headings and their use. For a single box on a few pages within a site, it doesn’t qualify for a heading, especially since it really isn’t. Besides, WordPress has taken over just about all the big headings and the best I could do would be to give it an h5.

The span is actually the coolest part of this particular design elements. It allows for the title to look the way it does outside of the container. If you really want to see some awesome (I’m proud of them) CSS experiments, I have a few. BUT, they were all designed before Firefox came around with its own unique issues, so some of these don’t work in Firefox, I learned recently, but they all work pretty darn good in MSIE, Opera, and others. Some really push the limits of CSS and browsers. Older browsers still see the majority of these as they were meant to be. I worked overtime to make that happen. I have a lot of work ahead of me to change these experiments to work in Firefox AND the rest of the browsers….ah, work. Lots of work. But that’s the kind of work I love. This nitpicky detail stuff makes me bonkers.

…okay, end of digression (I love talking about the CSS experiments because they were some of the last very FUN FUN moments I had on my website. The rest tends towards drudgery.)…….you are the miracle worker.

I blew out the position:relative for everything and it works! I had been worried about all of those, since they are left from the old site, but was waiting until clean up time. And there is a lot of clean up to be done when that time comes. Such is the way…

You are a total and complete star. Thanks so much for taking the time out to fix me up! Hee hee.

*cough* ??
I think tutorials on writing CSS should be called *throwing out your CSS*. I have got rid of well over half of mine recently by doing it properly. And I hate hacks of any kind. ??

Lorelle I wanted to check out your awesome CSS experiments but as far as I can see the links in the right hand nav bar do not seem to work so I couldnt check it all out. It all looked cool anyway – there is certainly a lot going on ??

Yes, as I said, Firefox doesn’t see those links on the right nav fields. All those will go with the conversion in the next week or so into WordPress, so I have just left them since almost everything works perfectly with MISE and other browers. These were all done before Firefox came onto the scene and had to be considered.

I spent over three years trying to find something similar on the net and could find only a couple of pages, so I decided to push the limits myself and see how far I could go stylizing web page elements to look like the stuff from magazines. All the notes are in the source code, though I might change that when I redo them all to validate in Firefox.

I had the same problem with a div floated to the left. The div to the right was blocking the links.

Fixed this by removing position: relative from the div on the right.