CSS and browser compatibility

  • Unknown's avatar
    nsfocusblog · Member ·

    I got the custom design upgrade for my blog. However I have noticed some issues, particularly issues regarding the fact that my blog looks different in mozilla, chrome, and firefox.
    I know there are different codes but could anybody point out where the problems i see root from?

    The problems are
    In internet explorer the footer and one my top sidebar has words that are suppose to be invisible.
    In mozilla firefox the footer is not aligned. Also for my “news” page the table has excess space that i cannot seem to get rid of
    in chrome
    In all three browsers when I make the window smaller than full size the right side of the blog shows the original theme’s background. How do i cover it up completely?

    The blog i need help with is http://www.nsfocusblog.com
    Thank you

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    You can check cross browser compatibility here http://browsershots.org/
    Also know that naming browsers without providing the version numbers is useless information for us. WordPress.com supports the browsers and versions of them found here http://browsehappy.com

    Please be patient while waiting for a Volunteer who helps with CSS editing or Staff to assist you.

  • Unknown's avatar
    designsimply · Member ·

    In internet explorer the footer and one my top sidebar has words that are suppose to be invisible.

    I checked http://nsfocusblog.com/ with Windows 7 and Internet Explorer 10 and I couldn’t see a difference in the words showing in the footer and the follow widget at the top right. Did you already fix this? If not, please reply and include a note about which words are the problem so anyone trying to help knows what to look for. Also, it would help a lot if you included the custom CSS you are using to hide the words.

  • Unknown's avatar
    designsimply · Member ·

    In mozilla firefox the footer is not aligned. Also for my “news” page the table has excess space that i cannot seem to get rid of

    I tested this using Firefox 31 on my Mac and I could see the problem. The issue is being caused by this custom CSS:

    div.block ul.menu #menu-item-1009 a:link {
    line-height:0;
    }

    I think if you remove that line-height property, it will fix the problem in Firefox and everything will still look good in Webkit browsers. Test the change in multiple browsers to make sure.

  • Unknown's avatar
    designsimply · Member ·

    Also for my “news” page the table has excess space that i cannot seem to get rid of in chrome

    For reference, this is a link to the news page: http://nsfocusblog.com/nsfocus-in-the-news/

    I checked that page in Chrome and Firefox, and I actually see extra space in Firefox not Chrome.

    I see you are using table codes such as:

    <td valign="top" width="159"><a href="http://nsfocusblog.files.wordpress.com/2013/07/hostingjournalist.png"><img class=" wp-image-4235 aligncenter" alt="HostingJournalist" src="http://nsfocusblog.files.wordpress.com/2013/07/hostingjournalist.png?w=175&h=45" height="45" width="175"></a></td>

    Notice how the width attribute for the td tag is set to 159? That value appears to be interpreted differently in different browsers. You might try adjusting that 159 value everywhere it appears, or possibly remove that width attribute all together to see if that works better across different browsers.

    I noticed you’re using multiple tables to layout the images on the news page. You might consider consolidating them into one table. A table generator may help:
    https://www.google.com/search?q=table+generator

    Or you can switch from tables to divs and try controlling the layout for that page with CSS instead. To do it that way, you would need to adjust the HTML as well as add class names that could then be used in the CSS editor to adjust widths.

  • Unknown's avatar
    designsimply · Member ·

    In all three browsers when I make the window smaller than full size the right side of the blog shows the original theme’s background. How do i cover it up completely?

    I couldn’t see this happening when I tested. If you’re still having trouble with the background image, please post the custom CSS you’re using to change it. Maybe that will help me get closer to seeing the problem in action.

  • The topic ‘CSS and browser compatibility’ is closed to new replies.