CSS alignment problems
Hi all, I'm having a little, well to be truthful a big problem with the CSS for my web site. I'm trying to get my links to align vertically center in my Title section and I want them to be roughly were they are horizontally. Now I tried to do this and it sort of works but the only problem is it only works on a maximized window with screen resolution at 1024 and you can't resize it at all!!
See you can check it out here. I just don't know what I'm doing wrong. Then again being fairly new to this doesn't help either!!
If you can give any assistance it would be greatly appreciated!!
Thanks a bunch!
Busy posted this at 03:23 — 17th September 2001.
He has: 6,151 posts
Joined: May 2001
You arent really doing anything wrong, its one of the draw backs of CSS.
what you are doing doesnt work on all browsers, all i get in Netscape is "A web site title" in white letters at the top, the other text is under but is all black so cant be read. youd be better off just using tables as this works well and your layout would suit tables better. Youd also probably find your .html file smaller in size as well. (the .html adds to loading time as well as graphics)
in IE the problem you have is the layers are set to a actual pixel size, and your trying to mix pixels with percentages. if you use dhtml you can make the layers resize on window size but if the person uses some older browser or has javascript turned off they wont see yoru site.
you can get the layers to work on most browsers at a set pixel width & height but your going to have to base it on a set size (800x600 etc)
if you are new to web design in general, id stay away from CSS for a while, tables do just as well as layers but are more predictable and stable and work downwards to about version 2 or 3 browsers. CSS is ok for sizing text, links, effects like bold, italic etc but useless when layers are involved.
good luck
Suzanne posted this at 05:26 — 17th September 2001.
She has: 5,507 posts
Joined: Feb 2000
You have some nastiness with brackets not being closed (check your voice declarations, for instance -- this is an error I have seen before).
Additionally, you have multiple widths in one declaration, quotes where they don't belong in another, et cetera. You will have to be careful with your values as well -- setting width to 100% and having margins and padding will cause scroll. More reading on this would be necessary, as I believe there are differences in how IE5.5 interprets margins (PC) whereas the other CSS compliant browsers interpret them correctly.
Also, you can center things in Netscape and Opera by setting the margins to auto, but in IE5.5 PC it will default left. One solution is using JavaScript to set the margin widths based on browser resolution and width of the window.
So basically, I recommend tidying it up and getting rid of the errors and then carefully looking at resources like http://www.webreview.com/style/css1/charts/mastergrid.shtml for conflicts and resources like alistapart.com (check for the CSS articles especially around the redesign to compliance) for tips and suggestions. glish.com is very helpful as well.
Good luck!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.