Hi
i have just rewritten my web site using CCS. I have a problem with text not appearing in the correct format when displayed in IE6 and 7 and Firefox, all is ok in safari. In essence the text overflows the HTML box i have created for it and on a number of pages goes off the bottom of the page…
Am i missing something here or is this a problem with the different render attributes of the browsers?
Hi c55 - if you can post a link to a page online somewhere we can have a look at your CSS based site.
If you post your link in the format http://wwwetc it will be a clickable link and if you set your HTML Code to more readable in File>Document Setup>Output then it is easier for us to read your Source Code in your page.
is this a problem with the different render attributes of the browsers?
In some respects it is but mainly your problem is that the construction of your pages means that HTML containers are individual layers so that there is no interaction between the different layers.
This means that one HTML container which renders with a slightly larger text size on one browser will expand until it overlaps the adjacent HTML container (you can simulate this in Safari by increasing the text size) Under the View Menu select Zoom Text Only and then increase the text size by using Cmd +
To avoid this when using a CSS cmethod you should try and work along the lines of what is commonly referred to as the Box Model approach.
This method nests HTML containers within others so that expansion of one moves the next one down rather than overlapping.
You can also help avoid this by allowing for more space between HTML containers to give that extra ‘room for expansion’.
DanJ has a Tutorisal/Screencast - Understanding A Box Model that will help understand the process.
Was there a particular reason that you wanted to recreate the site using CSS - because the nature of using the non-CSS method (essentially tables) means that each item will move the one next to it when it expands.
BTW - I don’t know if this is deliberate or not but it is something you must NOT do unless you want the likes of Google to blacklist you for dodgy SEO tactics - you have the following black text on a black background at the bottom of your LH column.
Dave
thanks for the post. The main reason for creating the site in CSS was to get the desired visual effects, plus i have moved from Seriff (PC) to Freeway (Mac)
the tutorial you mention is not appearing but i have dropped dan a mail to ask if it available and where
Cheers
The main reason is to set a single page background image and float HTML text over this
So when displayed you get text on top of the image rather than with HTML box where you are limited to a color
There is no reason why you cannot have a background image with text on top in a table based layout - as long as you are setting it as a proper page background.