#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    378
    Rep Power
    11

    CSS and browser errors


    Hi all,

    I've just put together a "template" webpage that is controlled entirely by CSS...I'm very happy with it and it works like a dream in IE6+, but when I test on Mozilla and Opera I end up with my hyperlink text not obeying the CSS rules and find all my positioned graphics don't line up correctly either. Both Mozilla and Opera are the latest versions, I haven't tested on Netscape Nav yet but I'm concerned with the problems I'm having getting my page to display consistently...

    Any suggestions as to how to tackle this problem? I don't want to recreate different CSS for different browsers...but if I have to, is there a resource on the web available so you can see which CSS tags/properties render correctly with different browsers?

    In addition, if I use Javascript to specify certain CSS styles based on the browser type...how do I "load" those differing SS using javascript? I can do browser detection, but I'm not sure on getting different SS "loaded" based on the selection.

    Wow...bit of a mouthful there...
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    It's a good bet that what you see in Moz and Opera is what you coded. If any browser gets CSS positioning wrong, it's IE. Usually if you code correctly for a standards compliant browser, it's a matter of a few well-known hacks to dumb it down or fix it up for IE. If you code for IE, you you could play hell trying to get it to work right in a modern browser.

    The first thing to do is to validate your HTML and CSS using a strict doctype. After fixing any errors, bring your specific problems, along with a minimal test case to the forum. There are any number of folks ready to help with whatever they're best at.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    378
    Rep Power
    11
    Thank you, will do! This is my first real attempt at coding a "template" webpage in CSS alone, so I am pretty much positive that I've made some major faux pas (sp?) along the way ...previously I've used tables to layout the page with success...but I want to move towards the logical breakdown between content and presentation...

    The website will be a business one, and the I've been told not to consider older browsers when designing it (which helps and also doesn't)-so instead of all the flash stuff, I've decided to use the long leash to progress towards a more efficient design style...
    Last edited by amstel_za; February 26th, 2004 at 04:23 AM. Reason: Additional information
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    14
    Rep Power
    0

    Similar Problem in reverse


    I've just made a template page with a graphical border, which has been broken up in to many separate JPEGs and positioned with a table.
    However I want the page to expand vertically if:
    a)the main area text is too large
    b)the menu on the left (which expands and colapses) is expanded too much.

    My original test was a basic table, which then had another table nested within in - which works like a charm, but is hugely bloated and I'm never going to be able to edit it!

    Trying to make it into a single table is fine until I try to set certain cells fixed heights and others have variable heights. Works fine in NS but not IE...

    Below is the code I have used, can anyone suggest what I can do to fix it for IE. Ive color-coded the cells so that the RED cells are to expand vertically.

    Note that the menu is supposed to have the slight gap (due to the graphical style) and starts at a fixed height(so the JPEG fits nicely when the menu is fully collapsed.

    Copy and paste the code into a html document and have a look see in NS and IE.

    Thanks for your help!!

    Code:
    <HTML>
    <HEAD>
    <STYLE>
    TABLE{
    	width:755px;
    }	
    TD{
    	Border-style:solid;
    	Border-width:1;
    }
    TD.TitleBar{
    	height:66px;
    	background-color:#cccccc;
    }
    TD.MainMenuText{
    	height:50px;
    	width:200px;
    	background-color:#ff9900;
    }
    TD.RightBorder{
    	width:40px;
    	height:250px;
    	background-color:#cccccc;
    }
    TD.MainExpandCollapseText{
    	height:20px;
    	background-color:#ff9900;	
    }
    TD.MainMenuPadding{
    	width:10px;
    }
    TD.MainMenuArea{
    	height:200px;
    	width:190px;
    	background-color:#ff0000;	
    }
    TD.RightExpander{
    	background-color:#ff0000;	
    }
    TD.BottomBorder{
    	height:40px;
    	background-color:#cccccc;
    }
    TD.RightBottomCorner{
    	background-color:#cccccc;
    }
    
    
    </STYLE>
    
    </HEAD>
    
    
    <BODY>
    <TABLE cellspacing=0; cellpadding=0>
    	<TR>
    		<TD CLASS="TitleBar" colspan="4">TITLE</TD>					<!--Title-->
    	</TR>
    	<TR>
    		<TD CLASS="MainMenuText" colspan=2>"Main Menu"</TD>				<!--Main Menu-->
    		<TD rowspan=4></TD>								<!--Main Body of text-->
    		<TD rowspan=3 CLASS="RightBorder">B</TD>					<!--Top of the right border-->
    	</TR>
    	<TR>
    		<TD CLASS="MainExpandCollapseText" colspan="2">Click to Ex/col</TD>		<!--Exp/Col-->
    	</TR>
    	<TR>
    		<TD CLASS="MainMenuPadding" rowspan="2"></TD>					<!--Menumargin-->
    		<TD CLASS="MainMenuArea" rowspan=2>MENU<BR>Option<BR>Option<BR>Option<BR>Option<BR></TD>			<!--Menu bit-->
    	<TR>
    		<TD CLASS="RightExpander">B(ex)</TD>						<!--right expander-->
    	</TR>
    	<TR>
    		<TD colspan=2>Menu Spacer</TD>							<!--Menu bottom-->
    		<TD CLASS="BottomBorder">Bottom Border</TD>					<!--Botom Border-->
    		<TD CLASS="RightBottomCorner">BC</TD>						<!--Bottom Right Corner
    	</TR>
    
    </TABLE>
    </BODY>
    </HTML>
    Last edited by rtm223; February 26th, 2004 at 04:38 AM.
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    Hi rtm223,

    Welcome to the forum. Let me suggest that you not piggy back on an existing thread. Folks are less likely to see your post as a new problem to tackle, and if they do, your subject line, "Similar Problem in reverse," is less than informative or interesting.

    Please study and implement the references cited above plus these articles—then repost;

    http://forums.devshed.com/t66631/s.html and

    http://www.catb.org/~esr/faqs/smart-questions.html

    There are a lot of folks ready to help you, but you must make it clear what the problem is and use a subject line that will attract those that have an interest in your problem class.

    cheers,

    gary
    Last edited by kk5st; February 26th, 2004 at 05:14 PM.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    378
    Rep Power
    11

    Wink Browser anomolies (Source Code Included)


    Hi all,

    I've validated both my HTML (Strict 4.01) and my CSS...but it still renders a little oddly on Mozilla/Opera/IE6 (haven't tried Netscape)-Can someone have a peek and tell me what errors I'm making please?

    http://highways.wokingham.gov.uk/test/xhtml_test.htm

    (Dont let the filename mislead you...it's not XHTML)

    CSS CODE:

    <!--
    /* This is the only CSS for the Montreux Investment website */

    a:link { font-family: Arial, Sans-serif;font-size: xx-small; font-weight: 400;
    font-style: normal; text-decoration: none; text-transform: none; font-variant: normal;
    color: #FF0000; text-decoration: none; background-color: transparent}

    a:visited { font-family: Arial, Sans-serif; font-size: xx-small;font-weight: 400;
    font-style: normal; text-decoration: none; text-transform: none; font-variant: normal;
    color: #FF0000; text-decoration: none; background-color: transparent}

    a:hover {font-family: Arial, Sans-serif; font-size: xx-small;font-weight: 400;
    font-style: normal; text-decoration: none; text-transform: none; font-variant: normal;
    color: #FF0000; text-decoration: underline; background-color: transparent}

    .content { font-family: Arial, Sans-serif; font-size: xx-small; font-weight: 400;
    font-style: normal; text-decoration: none; text-transform: none; font-variant: normal; }

    .PageHeading { margin-left: 0.5cm; font-family: Arial, Sans-serif; font-size: 14px; font-weight: 700;
    font-style: normal; text-decoration: none; text-transform: none; font-variant: normal; }


    /* VertNavBar deals with spacing and positioning the vertical navigation bar on the left side of the webpage */

    .VertNavBar {line-height: 1cm; margin-left: 0.5cm; position: absolute; top:160px;
    font-family: Arial, Sans-serif;font-size: xx-small; font-weight: 400; font-style: normal;
    text-decoration: none; text-transform: none; font-variant: normal;
    color: #FF0000; text-decoration: none; background-color: transparent}

    /* HorizNavBar deals with positioning the vertical navigation bar on the left side of the webpage, HorizSpace */
    /* deals with providing padding for the middle word (out of 3) thereby giving the illusion of word spacing. */
    /* This was done because the word-spacing CSS tag kept spacing each word (About Us became About Us) */

    .HorizNavBar {position: absolute; left:627px;
    font-family: Arial, Sans-serif;font-size: xx-small; font-weight: 400; font-style: normal;
    text-transform: none; font-variant: normal;color: #FF0000;
    text-decoration: none; background-color: transparent}

    .HorizSpace {padding-left: 20px; padding-right: 20px}

    /*VertGraphicLine deals with position the fading red-white graphic and HorizGraphicLine deals with */
    /*placing the fading horizontal red-white graphic. Address_VertBar places a vertical red-white graphic*/
    /*to the right of CompanyAddress*/

    .VertGraphicLine {position: absolute; left:10px; top:130px}
    .HorizGraphicLine {position: absolute; left:10px; top:115px}
    .Address_VertBar {position:absolute; left:780px; top:504px}

    /*CompanyAddress deals with position the company address and details on the bottom right of the screen*/

    .CompanyAddress {position: absolute; left:680px; top:500px; text-align:right;
    font-family: Arial, Sans-serif;font-size: xx-small; font-weight: 400;
    font-style: normal; text-decoration: none; text-transform: none; font-variant: normal;color: #000000;
    text-decoration: none; background-color: transparent}


    -->
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    378
    Rep Power
    11
    Anyone please have a squizz at the above post??

    Sorry for pushing, but I leave for "leave" this weekend and I hope to leave on a good note with the page fairly uniform.

    Thanx
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    5
    Rep Power
    0
    When you say, "renders a little oddly on Mozilla/Opera/IE6" it's hard to know what you mean.

    Off the top of my head, however, I can tell you that the relative font sizing is completely uncontrollable. Every browser has a different interpretation of what "smaller" means. Some jump down by pixels, some by points, some by pixels which then then round to the nearest point size if there's no explicit match, some take the UA setting as the "base" from which to shrink or grow, others acknowledge your base setting (but some think of the base font as that set with P and others treat the font size set in BODY). I think you get my point. Use pixel sizes if you want more cross-browser control. And be prepared to utterly relinquish perfect cross-platfom control.

    Numeric font weight is not widely supported and, when it is, suffers from the same vagueness as relative sizing. For any level of consistency, use bold or nothing.

    Are you using a development program? You must be because otherwise I can't think of any reason to specify that the background color be transparent. Just leave that out. Ditto for all those text-transform: normal. Not that those tags are wreaking any negative havoc, but still.

    You should not be using "cm" as a measurement at all unless you're creating a stylesheet for a printer (and even then....). If this stylesheet is meant for monitor display, you have to use a scale the screen understands (px, em, ex, percentages).

    -- H
  16. #9
  17. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    A few little things that derive from a different design mindset.

    Wrap your page in a containing div. For one thing, that will allow you to center the page if you wish. It will allow you to have elastic dimensions. Other reasons to follow.

    Put the menus in lists. It is semantically correct, plus you can size the li elements ( a better way than the padding hack, no?)

    In the hor. menu bar, use float:right on the li elements. (a reason to have the wrapper).

    Wrap the address in—wait for it—the address element. It is semantically correct and improves accessibility.

    Position the address and its vertical bar from the right side (that handy wrapper again).

    Let your viewer determine the font size. He knows what his eyes and monitor can handle—you don't. By the time he enlarges the font size from xx-small to readable, your layout is broken. OTOH, if his default is, say 10 or 12 px, xx-small is less than the minimum legible 9px.

    As a general rule, try to be less in love with absolute positioning. Learn to work in the flow.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    378
    Rep Power
    11

    CSS and Browser anomalies


    Hi all,

    Thank you for the advice, I'll have a crack at it when I return from my leave and let you know.

    Cheers,
    Ben

IMN logo majestic logo threadwatch logo seochat tools logo