Announcement

Collapse
No announcement yet.

CSS Issue in Chrome and Safari

Collapse
X
Collapse
 
  • Page of 2
  • Filter
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
    #1

    CSS Issue in Chrome and Safari

    Hi all,

    I have been working through the night on this and now cannot see what the problem is. I am now completely code blind and need someone to see what I cant ;-)

    I have a site based on reflective theme and all the pages work in all browsers for the catalog areas. However, the brochure pages work in FF3+ and IE but are not displaying correctly in Chrome or Safari.

    Can someone please check the pages and let me know what I have missed please?

    I know I will kick myself once it is pointed out ;-)

    http://207.45.176.234/~comfortk/index.html (Test area)

    Thanks in advance
    Tags: None
    #2
    Your brochure pages are probably using a different overall layout to section pages, they can be different, especially if you're using standard themes and not creating your own. Look to rationalise them both onto the same layout for consistency or at least get them doing and containing the same code. It will then either work across all pages or no pages, so consistent.

    Comment

      #3
      Lee,

      Thanks for your reply.

      I am using the exact same layout for both brochure and catalog pages (although slightly modified from the standard theme now due to me trying to fix the problem)


      Any other ideas?

      Do you know of any products like Firebug for Safari or Chrome??

      I have used the property inspector in Chrom but this is now way as useful as Firebug.

      regards

      Comment

        #4
        Lee,

        Thanks for your quick reply

        I know not to mess with the declarations and I dont think I have removed anything as my current pages have the following:-

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
        <html>
        <head>
        <title><actinic:variable name="PageTitle" /></title>


        In the source code for the index.htmlpage has:-

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Home</title><Actinic:BASEHREF VALUE="http://207.45.176.234/~comfortk/" FORCED=1 /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta http-equiv="MSThemeCompatible" content="yes" /><link href="acatalog/actinic.css" rel="stylesheet" type="text/css"><script type="javascript">
        isSafari3 = false;
        if(window.devicePixelRatio) isSafari3 = true;
        </script><script language="javascript" type="text/javascript" src="acatalog/actiniccore.js"></script><script language="javascript" type="text/javascript" src="acatalog/actinicextras.js"></script><Actinic:COOKIECHECK /><script language="javascript" type="text/javascript">
        <!--
        saveReferrer();
        // -->

        What am I missing ;-)

        regards

        Mark

        Comment

          #5
          Your second bit of code has some JS in there, as both these browsers use the same engine, maybe linked to that? I'm just having a look in Chrome, is it the big gap at the top we are talking about, where the content is pushed down?

          Comment

            #6
            I can see a few things but it's hard to say for sure whether a particular one is causing the issue or whether a culmination of them all, so i'll fire some things that stand out to me and see what you think.

            Absolute positioning in the header, i never fail to see a problem when absolute is used, i've not used it in 5 years and i don't think you need to, looks a reasaonbaly straightforward setup, just have an overall container and float inner containers left within it. Margins and absolute positioning are just killers IMO.

            Your main content is not clearing your navbar, it's hovering over it, you can see this if you inspect in firebug. Make sure they are cleared.

            The table tag you have around the top navigation bar has no declarations attached to it, declare all tables in a standard way in my experience, the omission of cellpadding and cellspacing has caught me out many a time when i'm seeing inconsistent rendering.

            I'm still looking, will post this so you can start taking a look.

            Comment

              #7
              Yes Lee,

              The gap at the top of the content area.

              If you have a look in FF you will see how it supposed to look.

              I added the javascript following some research on Google and this is what they recommended. But this does not work either.

              I have emailed you to explain a little further about the issue.

              regards

              Comment

                #8
                Check your list layouts, they don't look the same to me, there doesn't seem to be one on the sections, whereas the brochure pages have an overall table?

                Comment

                  #9
                  How is Mo Mo Blankies added to the page, doesn't seem to part of any list layout? i take it that's a fragment?

                  Comment

                    #10
                    Which page are you looking at so I can tell you?

                    All the information is added to the site using standard Actinic products or fragments.

                    The fragments on the home page, have been set in the Fragment List Layout Settings with the first row set as 3 the middle set as Variable and the last row not used. However, I did reset this back to the default and this made no difference to where it was displayed on the Safari and Chrome browsers.

                    I hope that helps you

                    Re the non use of margins etc. Unfortunately, we followed the W3 Schools approach to the box model and it will take me a little time to switch and to stop using margins. :-) However, I will look at learning that approach next week to see if I can remove the reliance on margins etc. Thanks for the tip

                    regards

                    Mark

                    Comment

                      #11
                      The problem is we all do things differently, i use margins sparingly, much favouring padding and i never use absolute positioning, it's just a nightmare in my experience.

                      Keep your margins, lots of people work with those, i don't cos of IEs doubling up of them in random places, but seriously get rid of the absolute positioning. Margins and/or padding with float lefts or rights is as trouble free as you can get IMO and all you need to do things like you showed me.

                      Comment

                        #12
                        I was on the Mo Mo Blanket page, the top part of that page does not seem to be included via a list layout, i presume it's a fragment, whereas on the brochure pages there is a list layout (containing table).

                        Comment

                          #13
                          In the CSS the content has clear right which might be the culprit.
                          Peblaco

                          Comment

                            #14
                            Lee,

                            Thanks for your help. Yes the first item on the Mo Mo Blankie page is a fragment, then followed by products.

                            Peblaco,

                            Thanks for your comments I will change the CSS and see what happens.

                            regards

                            Comment

                              #15
                              Peblaco,

                              I made the changes you suggested and I now have the content area sitting below the sidebar (nav) and spread across the page on all browsers.

                              Any suggestions please?

                              thanks

                              Comment

                              Previous 1 2 template Next
                              Working...
                              X