Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,830
    Thanks
    21
    Thanked 157 Times in 148 Posts

    text formatting issue in FF

    I've got a formatting issue for the following page in Firefox:

    http://www.mediamogulsweb.com/accessories.php

    The last two catalog categories in each column of the listing on that page are too close together in FF....However, in IE they look fine...

    Is there a quick CSS fix for this, or do I have to make separate stylesheets for each browser?

    Thanks.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #2
    New Coder
    Join Date
    Aug 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your CSS doesn't validate and neither does your HTML.

    Try fixing the errors listed in those pages and see if that helps. I'm not going to waste the time it'd take to get to the bottom of that if the page doesn't even validate.

    If you can modify your HTML/CSS into valid, standards-compliant code, I'd be more than happy to have a boo at it.

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your CSS for the link class is causing the problem. The line-height is smaller than the font-size, and it's a conflict browsers may handle differently. So remove the line-height or adjust the values to work together.

    Code:
    A.c {
     	font-family: Verdana;
     	font-size: 11px; 	font-style: italic;
     	font-weight: bold;
     	color: #000000;
     	line-height: 9px; 	text-decoration: underline;
    }
    A.c {
     	font-family: Verdana;
    	font-size: 11px;
    	font-style: italic;
    	font-weight: bold;
    	color: #000000;
    	line-height: 9px;
     	text-decoration: underline;
    }
    A.c:visited {
     	font-family: Verdana;
    	font-size: 11px;
    	font-style: italic;
    	font-weight: bold;
    	color: #000000;
    	line-height: 9px;
     	text-decoration: underline;
    }
    A.c:hover {
     	COLOR: #444444;
    }
    Edit:
    Quote Originally Posted by evilregis
    Your CSS doesn't validate and neither does your HTML.
    I second that. You'll get unpredictable results from your CSS.
    Last edited by mcdougals4all; 03-04-2005 at 03:59 PM.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,830
    Thanks
    21
    Thanked 157 Times in 148 Posts
    Thanks for the feedback, guys....

    I adjusted the line height to 11px., but still having the same problem....

    Duly noted about the validation issues.....

    If I code with validated HTML tansitional (which is what I was attempting to do with this page. and obviously failed), can I expect complete CSS cross-bowser compatability, or do I have to code with validated HTML strict to accomplish this?....Or, is there no real perfect solution for this problem....

    Thanks.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    You have the "c" class duplicated in the CSS, so make sure to take out one, otherwise anyone change will be overrulled by the other.

    The code is horrible, btw; not to sound rude, but there are tons and tons of errors in there for someone who is selling web services.

    To fix the problem, just take out "line-height" altogether. There's really no need for it to be in there as at 11px it's still smaller than the text-size.

    Producing valid code is separate from cross-browser compatibility. X-browser issues arise from the different ways browsers interpret the rules of HTML/CSS. However, once ALL browsers are standards-compliant (thanks again, Internet Explorer), coding to standards will be the easiest way to accomplish this.

    The best thing to do would be to brush up on your CSS and try Googling for different bugs and hacks when the need arises... eventually you'll get a deeper understanding of the differences in rendering.

  • #6
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,830
    Thanks
    21
    Thanked 157 Times in 148 Posts
    Yea, taking out the line height didn't help either...

    No worries, no need for you all to look for a solution, I'll spend some time validating this code....

    Anyway, I thought that I had a handle on CSS, but of course, I learned all of this via rather unconventional methods, so I'm not surprised if there are gaps in my knowledge.....Can you offer a good step-by-step resource for learning to code precise CSS?

    And you guys can blast me with all the criticism you want..... ....I'll swallow it and learn from it....Learning is good ....
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by chump2877
    Yea, taking out the line height didn't help either...
    Erm? I just tried it here, it worked fine. You're still duplicating the "c" class in the CSS, though. a line-height of 13px or below gave you your problem, 14px makes it all even (or no line-height at all), and 15 px or above spreads the spacing out a bit. If you want more space at the bottom add "line-height: 15px" or something larger.

    If you want I'll post screenshots for you.

  • #8
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,830
    Thanks
    21
    Thanked 157 Times in 148 Posts
    I understand what you're saying, but I was trying to avoid creating different stylesheets for the different browsers...I like the spacing in IE as it is now, and I'm afraid if I bump up the line height to 15px on the affected rows, that I'll only fix the FF issue and then create another issue in IE....know what I mean, Vern?


    Edit: Nevermind....I decided to try pumping up the line-height uniformly for IE and FF, and oddly enough, it looks OK in BOTH browsers now...go figure....Thanks for the help!
    Last edited by chump2877; 03-05-2005 at 02:44 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪


  •  

    Posting Permissions

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