Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member Grump's Avatar
    Join Date
    May 2003
    Location
    the REAL Northern California
    Posts
    7
    Member #
    1542
    A left floating text box that text wraps around the top, right and bottom is not rendering at the same size in all browsers (IE and Firefox are my main test platforms). The page was going pretty well, thanks to some help I have already received, but I hit a snag on this. Please take a look at the test page below.

    TEST PAGE

    The relevant style code follows:

    Code:
    .textboxleft 
    {
    	background: #3E5C92;
    	font: normal 0.8em/140% arial, helvetica, sans-serif;
    	margin: 10px;
    	width: 160px;
    	border: 1px solid #E4E7F5;
    	float: left;
    	overflow: hidden;
    	padding: 0.5em;
    }
    .textboxleft p
    {
    	color: #000000;
    }
    ul li
    {
    	color: #E0E0F6;
    	font: normal 0.9em/135% tahoma, arial, helvetica, sans-serif;
    }
    Of course, you can also look at the complete source code and download the css file for more information. I would be happy to provide any additional information.

    If there is something I can alter in the CSS to make the box 160px wide (or whatever I decide on) in all browsers, please let me know. I am very new at this and have only gotten this far with the help of people like you.

    Thank you,

    Grump
    PS: you will also notice another thread concerning the bulleted list problem you see. It bumps into the text box and doesn't look good. Please excuse any redundancy, but these are 2 different problems, I think.

  2.  

  3. #2
    Senior Member james's Avatar
    Join Date
    May 2003
    Location
    Melbourne, AUSTRALIA
    Posts
    364
    Member #
    1352
    Try adding margins and paddings for all TD's and divs, eg, .tcat (the left hand td) doesn't have it defined, so its relying on the browser's default. The main td doesn't have a class or id defined, so it's relying on the browser default too... I see though that you've got cellSpacing=0 cellPadding=0 for that table, but if I recall correctly, XHTML 1.0 Trans has all element properties in all lower case.
    James H
    Home Page · Mars Page · www.fihsf1.net (formerly www·fihs·net)

  4. #3
    Junior Member Grump's Avatar
    Join Date
    May 2003
    Location
    the REAL Northern California
    Posts
    7
    Member #
    1542
    Hi James,

    I edited all the code in my working copy to make the html all lower case. That didn't affect the text box rendering problem. I also tried adding cellspacing and cellpadding to some of the relevant TD's, but that didn't affect the text box rendering.

    Please explain what I should use for cellspacing and cellpadding in TDs that don't have it now. Should it just be cellspacing=0 and cellpadding=0? I think spacing and padding aren't inherited from TRs or even TABLES, so are you saying I should add this to all my TDs and DIVs unless it is specifically addressed in a class?

    Firefox is still not rendering the box (or the text) properly. I don't want line breaks between bulleted items (there isn't in IE). The <HR> is also not displayed correctly in FF. It's s'posed to be 85% wide, 1px high, white and centered. In FF, it's not white or centered. In fact, it looks more like a gray groove just off center.

    Thanks for any help,

    Grump

  5. #4
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    Remove the padding: 0.5em; from the .textboxleft class and modify it to margin: 0.5em; as part of the .textboxleft p class.

    This is because padding actually accounts for the width of the box, as of the moment it is probably rendering as width: 160px + 0.5em; Since the 'em' measurement is relative to the font size it will never give a precise size, in which case you could use pixels. If you wish to avoid cross browser issues try to avoid using padding wherever possible unless it's on an inline element, eg <span>.

    (sound confusing? ...see below)

    Code:
    .textboxleft 
    {
    	background: #3E5C92;
    	font: normal 0.8em/140% arial, helvetica, sans-serif;
    	margin: 10px;
    	width: 160px;
    	border: 1px solid #E4E7F5;
    	float: left;
    	overflow: hidden;
    	padding: 0;
    }
    .textboxleft p
    {
    	color: #000000;
            margin: 0.5em;
    }
    Your code looks a real mess for something that's supposedly written in xhtml, as James pointed out your tags and attributes MUST be written as lowercase and attribute values must be "quoted". Do a search on Google if you're unsure.

  6. #5
    Senior Member james's Avatar
    Join Date
    May 2003
    Location
    Melbourne, AUSTRALIA
    Posts
    364
    Member #
    1352
    Yes, Grump, I'd echo what Trico says, make sure you've got your syntax right, I forgot to mention the attribute values need to be quoted, so it's cellspacing="0" cellpadding="0".

    Once you've got the syntax right (test with http://validator.w3.org/check/ or Firefox's HTML Validator extension), try adding border:1px solid black; to tables, td's, div's and even p's to see how the padding and margin sizes are being rendered.
    James H
    Home Page · Mars Page · www.fihsf1.net (formerly www·fihs·net)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

text box size not consistent

Click on a term to search for related topics.
All times are GMT -6. The time now is 03:54 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com