Inline div float left causing link problems

I am redesigning a home page with inline divs. When I paste in a div - containing text and a couple of images - the text and image links work fine until I set the float to left. And then the links don’t work.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Are these images rectangular, or have you applied any corner effects
to them by chance?

Walter

On Jan 26, 2011, at 12:02 PM, Graham Meigh wrote:

I am redesigning a home page with inline divs. When I paste in a div

  • containing text and a couple of images - the text and image links
    work fine until I set the float to left. And then the links don’t
    work.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No corner effects. The divs work fine as layers and when pasted inline. But not when float left is applied.

The new page is a variation on this…

which works fine. I don’t understand what I have done differently.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Can you post the bad page temporarily? I can tell more from the HTML
than anything else. When you do, please be sure that the More Readable
setting is chosen in the Output pane of the Document Setup dialog.

Walter

On Jan 26, 2011, at 12:20 PM, Graham Meigh wrote:

No corner effects. The divs work fine as layers and when pasted
inline. But not when float left is applied.

The new page is a variation on this…

Dairy Diary Shopping Bag featuring the 2021 design

which works fine. I don’t understand what I have done differently.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here’s the link…

http://dairydiary.co.uk/123.html

Many thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, and which are the bad links? The add to basket graphics?

Walter

On Jan 26, 2011, at 12:42 PM, Graham Meigh wrote:

Here’s the link…

http://dairydiary.co.uk/123.html

Many thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There should be links on the book titles, images, more> and baskets.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Graham,
It looks like the div called “item12” is covering most of the page and covering the links. See if you can shuffle this to the back or rework the layout to avoid this layout.
Regards,
Tim.

On 26 Jan 2011, at 17:49, Graham Meigh wrote:

There should be links on the book titles, images, more> and baskets.

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.

Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Figure out what is item12 in your layout. It’s a very large HTML box,
it’s positioned above the elements that contain the links, and it’s
trapping all clicks on the lower part of your page. This doesn’t have
much to do with floats per se.

Walter

On Jan 26, 2011, at 12:49 PM, Graham Meigh wrote:

There should be links on the book titles, images, more> and baskets.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Brilliant! Thanks so much.

The reason I couldn’t sort this is because item12 is just the div containing: “There’s a fabulous selection of recipes available on our blog. Here’s a taster…”, the recipe images and titles - towards the base of the page.

How it was covering most of the page is a mystery! However, I have given it a float left and a definite height.

Thanks again. Don’t think I would have solved this on my own.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here’s what Tim and I both did when presented with your page and the
identity of one of the missing links:

Control-click the element in question, and select Inspect Element from
the contextual menu. (We’ve both got the Develop menu enabled in
Safari – it’s in the preferences – so we see that option.)

That opens a little window or pane showing the rendered HTML at that
point, but more importantly, highlights the chosen element in blue on
the visible page. In your case, we saw that most of the page was blue.

Walter

On Jan 26, 2011, at 1:08 PM, Graham Meigh wrote:

Thanks again. Don’t think I would have solved this on my own.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow that’s a might fine tool!

Cheers guys.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The Web Inspector is a great debugging tool and well worth working with to track down errors in your pages.
Here’s a very brief overview;
http://www.softpress.com/kb/questions/242/Taking+a+closer+look+at+your+web+site+with+Safari’s+Web+inspector

Another tool I use quite a lot is something I wrote to test and debug errant web pages called ‘Download and Set Base’;
http://www.freewayactions.com/tools/download-and-set-base/

This is a simple PHP powered form that grabs (curls) the specified web page, sets a tag (so that the page can use all of the images and scripts directly from the server) and then forces the file to download. The upshot of all of this is that I can open the downloaded HTML page in a text editor and start to tinker with the code knowing that when I preview it locally it will render as if it were on the server still.

There is even a bookmarklet on that page (dear it to your bookmarks bar in your browser) so you can download any page you are looking at simply by clicking on the link.
Regards,
Tim.

On 26 Jan 2011, at 18:14, Walter Lee Davis wrote:

That opens a little window or pane showing the rendered HTML at that point, but more importantly, highlights the chosen element in blue on the visible page. In your case, we saw that most of the page was blue.

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.

Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options