Positioning problem

fluppet · 16-06-2005 11:28am #1

Hi there,
My website Dalkey Walks works fine in Internet Explorer (4+), but in other browsers (such as Firefox, Netscape, etc.) the title image (the big one that says 'Dalkey Walks') appears down at the bottom of the left column. Does anyone know how to correct this without a major redesign of the layout? I know it could be done using tables, but I really wanted to stick to a table-free layout (as the W3C recommends).

Thanking you in advance,
Alan (Fluppet)

hostyle · 16-06-2005 11:35am

fluppet wrote:

Hi there,
My website Dalkey Walks works fine in Internet Explorer (4+), but in other browsers (such as Firefox, Netscape, etc.) the title image (the big one that says 'Dalkey Walks') appears down at the bottom of the left column. Does anyone know how to correct this without a major redesign of the layout? I know it could be done using tables, but I really wanted to stick to a table-free layout (as the W3C recommends).

Thanking you in advance,
Alan (Fluppet)

Whats it hosted on? Your home dial-up? Can't connect at all.

Serbian · 16-06-2005 1:20pm

Can't get to the site either. Looks like he's hosted with eNom. They seem to host a bunch of dodgy domains.

16-06-2005 1:29pm

Try enclosing "walks", "topback" and "topspace" within a <div id="centre"> and in your stylesheet have

#center
{
float: left
}

hostyle · 16-06-2005 1:30pm

Ack. What a mess

Try changing:

#centrepic {
	WIDTH: 100%;
}

to:

#centrepic {
	width: auto;
}

or removing it altogether.

Eoin · 16-06-2005 1:35pm

Sorry for going off-topic, but well done on providing a (fully valid) text version of the site, not something many people think of.

hostyle · 16-06-2005 1:41pm

fluppet wrote:

My website Dalkey Walks works fine in Internet Explorer (4+),

Could you define working fine? this wouldn't count as fine in my books

Serbian · 16-06-2005 1:58pm

How are you guys getting to the site? I tried going via the Google cache and it just showed the text only version. I guess it's time to try the Way Back Machine.

Ph3n0m · 16-06-2005 2:15pm

http://homepage.eircom.net/~fluppet/DalkeyWalks/

Serbian · 16-06-2005 2:25pm

Cool, thanks.

fluppet · 16-06-2005 4:10pm

Hi guys,
Thanks for your feedback so far.

Okay, where to start?

Strange that you can't get to it Serbian... I see hostyle left out to 'www' in the address, was that necessary to get to the site? I have never had any problems accessing the site... Thanks for going to so much trouble to try to see it :-)

28064212 - your suggestion doesn't seem to work.

Thank you eoin_s - it did take a long time to make the text-only version, etc.

hostyle - your suggestion doesn't work either :-(

hostyle - you touched on a separate topic there... I was going to try to correct this first issue and then try to find out why that was happening (in Internet Explorer, when the index page loads for the first time, it seems to cut off the bottom). Have you got any idea why IE does that?

I have tried redesigning the website several different ways, but I always seem to run into trouble in cross-browser compatibility. I really hope I don't have to change the design to something simpler, although it looks a bit amateurish, I do like the current style.

Again, thank you all very much, and any other suggestions would be very welcome.

-Alan (Fluppet)

hostyle · 16-06-2005 4:18pm

fluppet wrote:

hostyle - your suggestion doesn't work either :-(

You sure? It works here (well it fixes the firefox problem here at least).

fluppet wrote:

hostyle - you touched on a separate topic there... I was going to try to correct this first issue and then try to find out why that was happening (in Internet Explorer, when the index page loads for the first time, it seems to cut off the bottom). Have you got any idea why IE does that?

Ehm, to be honest its hard to tell - your HTML is all over the place. No indentation, un-semantic mark-up; and your CSS is full of caps. I'm busy now, but if I get the chance this evening I should be able to fix it up for you - or at least give you pointers.

Eoin · 16-06-2005 4:54pm

fluppet wrote:

I have tried redesigning the website several different ways, but I always seem to run into trouble in cross-browser compatibility. I really hope I don't have to change the design to something simpler, although it looks a bit amateurish, I do like the current style.
-Alan (Fluppet)

I really don't want to start a CSS/Tables debate - this has been done endlessly on this forum and I am not going to way which I think is better but - you have already provided an accessible and compliant text only version of the site. It is not the end of the world if you do use tables for the layout, once you ensure that the code is compliant.

fluppet · 17-06-2005 8:52am

hostyle wrote:

You sure? It works here (well it fixes the firefox problem here at least).

Hmm, it's definitely not fixing the Firefox problem for me... When you made the correction, did you make sure to change the address of the title picture so that it displayed? When only the ALT text is displayed (as Firefox does when it cannot display the picture) then it does look fine, but when the picture is displayed it pushes it all down to the bottom again.

hostyle wrote:

Ehm, to be honest its hard to tell - your HTML is all over the place. No indentation, un-semantic mark-up; and your CSS is full of caps.

I do admit it is pretty messy - I redesigned the website several times (you may have noticed the stylesheet is called 'sitestyle7.css') and unfortunately I was a bit careless and lots of old stuff got carried over, etc.

With regards to the indentation: When I view the source of Dalkey Walks using Firefox it appears indented, but when I look at the source of the W3C's homepage in Firefox it's not indented...

Do you think the capitalization of the CSS could be a problem? Times are changing... I was always taught to use caps in CSS the way I did.

-Fluppet

Eoin · 17-06-2005 10:20am

fluppet wrote:

Do you think the capitalization of the CSS could be a problem? Times are changing... I was always taught to use caps in CSS the way I did.
-Fluppet

It shouldn't be a problem once they match. I know that I.E. wasn't case sensitive before version 5.5 or so, but if the class definition and the entity referencing it both use the same case, it should be OK AFAIK.

rsynnott · 18-06-2005 3:28pm

It's broken in FireFox and khtml. Also, pedantic, but Dalkey is NOT a suburb of South County Dublin; it's a suburb of Dublin located in South County Dublin. South County Dublin is not a city, and as such lacks suburbs.

fluppet · 19-06-2005 5:06am

Thank you rsynnott for that geographical insight!

I presume from your silence that no-one can solve the problem with only a minor change, so can people tell me how they WOULD design this structure? Just a general guide - ie. you would have an absolutely positioned div for this, and a floating div for that, etc. Please be sure, however, that your design will be cross-browser compatible.

Muchos gracias (that's 'Thank You' for our non-'espanglophones'),
Fluppet

Edit:
Oh, and by the way, I found out the reason for IE's mysterious cutting off of the bottom of some pages. It's a bug in IE, see http://www.positioniseverything.net/ for details. Also on that site you will find details of the problem I am trying to correct in this post - apparently it is actually a bug in IE that my website displays correctly at all. It should be displayed like in Firefox, but I designed it for IE, so I unknowingly designed for the bug.

Also: As we appear to have some self-proclaimed pedantic members of this forum <glare at rsynnott> I should probably say that a more word-for-word translation of 'Muchos gracias' would be 'many thanks'. (This subject is now closed, no further comments on my Spanish will be accepted.)

rsynnott · 19-06-2005 2:19pm

Nothing wrong with being a little pedantic

hostyle · 19-06-2005 3:00pm

http://www.humanenvelope.com/boards.ie/dalkey/

is the way I'd do it. Obviously incomplete and done in 30 minutes or so, but you get the gist. Theres probably a less icky way to do the gray bar than the absolute positioning and z-index I used, but it looks the way you want, and should do so in most browsers (only tested briefly in IE 5.5 and firefox).

EDIT:

Some more twiddling with the stylesheet should fix any problems you find in IE on a Mac (or any other problematic browsers). You should probably also hide the CSS from IE 4 / Netscape 4 and older browsers via the @import CSS trick.

fluppet · 21-06-2005 2:18pm

hostyle - Thank you very much! I had actually tried it that exact way, but for some reason it didn't work for me... probably some silly little mistake somewhere. I am amazed that you would spend half an hour doing that for me!

I suppose all I can say is thank you again! And of course, if you ever need any help with Theoretical Physics (my speciality), you know who to ask!

hostyle · 21-06-2005 4:06pm

fluppet wrote:

hostyle - Thank you very much! I had actually tried it that exact way, but for some reason it didn't work for me... probably some silly little mistake somewhere. I am amazed that you would spend half an hour doing that for me!

No bother. I do it all day for other people

Positioning problem

Comments