CSS differences b/t Firefox, Chrome, Safari…??

  • Resolved vuarnet

    (@vuarnet)


    15 years, 7 months ago

    I am using the TwentyTen theme for wp and have been making small, but important, design changes using the CSS editor (edited in Eclipse PHP then copy/pasted into css editor in WP admin). When I asked a friend to view it on her computer (Win XP w/IE), it looked perfect.

    When I checked it on another computer (Win 7 w/Chrome), there were some issues that I had fixed that weren’t recognized. I changed the font size of the tagline and blog title objects in the header to be 0px and white using font-size: 0px; and font-color: #FFFFFF; to make it “disappear” so it wouldn’t muck up my design but I would still be able to use the HTML as the page <title>. When I checked on my computer, it looks like the changes register in Firefox, but not on Chrome or Sarafi (I don’t have IE … I’m a Mac person).

    The “blog title” change registered fine on all browsers, and was not visible, but the tagline was visible as could be. Here is the code that I used to make the tagline “invisible” while still using the embedded HTML text to be used in the <title> tag:

    }
#site-description {
	clear: right;
	float: right;
	font-style: italic;
	font-size: 0px;
	margin: 0px 0 0px 0;
	width: 220px;

    Any help as to how to make this persist on all browsers (at least Chrome and Safari) would be GREATLY appreciated! Thanks so much!

    If you want to see for yourself, check out: Packaging-Central.com Blog

    Ben

Viewing 2 replies - 1 through 2 (of 2 total)
  • Rev. Voodoo

    (@rvoodoo)

    15 years, 7 months ago

    the title is gone, the tagline is visible, but tiny. You haven’t yet made it white in the code above. Do that and you should be fine.

    press ctrl+f5 to refresh browser cache to see css changes

    Also, text-indent: -999em; is a good way to hide stuff, just moves it off screen

    Thread Starter vuarnet

    (@vuarnet)

    15 years, 7 months ago

    the title is gone, the tagline is visible, but tiny. You haven’t yet made it white in the code above. Do that and you should be fine.

    press ctrl+f5 to refresh browser cache to see css changes

    Also, text-indent: -999em; is a good way to hide stuff, just moves it off screen

    Thanks Rev. Voodoo! “For some reason” (I hate using that phrase…) the font color change I was using wasn’t sticking once I updated the CSS file in the WP editor … but I think I just figured it out with your help…

    The text-indent: -999em; should have worked to move it off-page, but it didn’t in Chrome or Safari (fine in FF)… apparently it was because of the font-size: 0px line … when I changed it instead to font-size: 1px it moved off-page as it should in all browsers.

    To test it, I did a combination of taking both lines of code away and replacing them in parts (and in different orders), altering the font-size: 0px and font-size: 1px lines, deleting cache and refreshing on all browsers and it was definitely the 0px attribute causing the issue.

    I’ve only been using WordPress for a few days now and am completely new to CSS, so I really appreciate the help!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘CSS differences b/t Firefox, Chrome, Safari…??’ is closed to new replies.