making text stay where you want it to on all browsers

[simonejones]

Hi all...I've just joined this forum in the hope that I can improve on my limited knowledge of webdesign..I have a couple of problems with a site I've built that I thought was almost finished but on checking other browsers etc it has a problem with keeping the text layers in the right place. Here is the code for one of the problematic layers in the hope that someone will see where I've gone wrong:

<div id="Layer7" style="position: absolute; left: 146px; top: 555px; width: 342px; height: 36px; z-index: 7"><div align="center">
<p><span class="style1">1. VP1195 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;2.VP850&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;3.VP1175&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 4.VP1110<br>
<br>
</span><span class="style1"> 5.VP640&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;6.VP595&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;7.VP525&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp; &nbsp;&nbsp;8.BR190 &nbsp;</span></p>
</div></div>

cheers all

[ryanhellyer]

Welcome to the forum Simonjones.

It is impossible to know what is wrong with your 'layer' unless we know what it is supposed to do. If you post back with either a link to the page, or the full HTML and CSS code for the entire page we will be able to help.

There are a few things you should be aware of though:

• Absolute positioning is rarely needed for designs and is best avoided unless you really know what you are doing with it.
• 'Align' is an old attribute and not needed anymore, margin:0 auto and text-align:center are the preferred methods of centering.
• It is rare to need to use so many &nbsp; in your HTML. Seperating chunks of text is normally better done with margins and/or padding.

[simonejones]

Thanks for that Ryan,
Here's the link to the page:
http://www.silkthreads.co.uk/page3.htm

as you will see the text on the left is dropping down?

..and I seem to have developed a new problem which is that half the nav bars are now not showing their mouseovers or popup menues?

[ryanhellyer]

Was this made in Dreamweaver by any chance? Some of your code reminds me of the stuff that Dreamweaver tends to spit out which can cause a whole swathe of problems.

The code is quite confusing so I'll post back later on when I've had a chance to trawl through it. In the mean time, you may want to try increasing your text size to see what happens (the layout becomes quite messed up).

[simonejones]

yes it is Dreamweaver...
and thanks for your help with this

[ryanhellyer]

I have had a good look at your site now.

The main problem you are having seems to be that you are using absolute positioning. Absolute positioning can cause all sorts of issues with layout as it removes content from the flow of the document. So if text flows out of the box, it will just keep spilling out (or dissapear if you are using overflow:hidden). This isn't too critical for the captions, as if you've got enough white space underneath them, they'll just fill that white space with higher font sizes or if you need to add more text than originally intended.

Your home page can cope with the absolute positioning, but the other pages are throwing a fit. If you increase the text size on your Welcome Page, the text spills totally over the images below making it unreadable. If you avoid the use of absolute positioning and stick to using floated boxes you will have a lot more luck. If you do a google search for "CSS floats" you will find lots of information about floating boxes.

The main advantage of using floats here, is that as the text takes up more room, the box will expand. With absolute positioning, the boxes will stay the same size and the text spills out of the box.

For your menu mouseovers, take a look at this demonstration on CSS mouseovers using a single image, they are much better than the hideous Javascript route that Dreamweaver uses for this technique. They work cross browser, are faster, are flicker free, are a smaller download size and work with Javascript turned off.

I'm not sure what type of "popup menu" was there originally, so I'm not sure I can help on that front. If you can show us what you are trying to achieve we may be able to help though.

If you do persist with the absolute positioning, you should make you've got a seperate box for each chunk of text, for example on your home page, the captions for two images are in one box. If they are in seperate boxes, you won't need to use &nbsp;'s to line them up and they'll still be directly underneath the captions regardless of what the user has their text size set to or what browser/font they are using.

Good luck with your design Let us know if you need more help if my comments are too confusing (I tend to waffle a lot).

[ryanhellyer]

One more thing. It helps to let us know what browser you having troubles in case it's a browser specific problem you are having.

[simonejones]

Thanks so much Ryan,
I'm so grateful for your help...
I need some time to digest your comments and its highly likely that I'll need more guidance!
Just to add that the pop-ups (dropdown(up) menu) are working on half the pages, they appear as you mouseover the bottom nav bar.....they were all working at first and now dont despite no changes being made

Thanks again

[ryanhellyer]

No problem.

I see your dropdown(up) menu problem now too. I have no idea how to fix that as it's all done with Javascript and I know very little about that. What you need to do, is to look up "Suckerfish Dropdowns". Suckerfish is a technique used to display dropdowns/flyouts or vertical sliding menus (amongst other things) without the need for javascript. They do use javascript for some old decrepid browsers like IE6, but the script is very small, lightweight and if you set it up correctly only IE6 and lower need to download it so it won't add to your page weight. The basic HTML can be setup as a simple list and with some magical CSS can display your menu in any way you like. This is by far the best method of doing these types of menus from an SEO perspective too in case that is important to you. They are also very accessible to users with disabilities, although they do suffer the usual problem of all dropdowns in that users who aren't good with a mouse have trouble negotiating them.


I have a demonstration of a Suckerfish WordPress Plugin I created a few days ago which creates Suckerfish Dropdowns on blogs ... http://ryanhellyer.net/test/wordpress1/

[simonejones]

Hi Ryan,
Yes it has taken this long to get my head round all the advice you have given here!....I now understand why I'm having problems...correct me again if I'm wrong but my page looks perfect on my system because I've laid my page out corresponding to my browser default font/size but when opened on another system or browser then if there isn't any room for larger font sizes or if I haven't specified how I'd like it to behave then the text just runs amock. Is that essentially the problem here?
My problem now is that I still dont know how to fix it!...can I limit how large the text can go on other systems? What is the simplist solution do you think...there is a float option in dreamweaver which Ive played around with but without any luck although I didnt know what the position option should be when using floats? And why are some pages ok and others not?
http://www.silkthreads.co.uk/home.htm



ps: please ignore the nav bar at the moment its a mess in progress!