Page 1 of 3 123 LastLast
Results 1 to 10 of 22
  1. #1
    Join Date
    Feb 2006
    Location
    UK
    Posts
    306
    Plugin Contributions
    1

    Default Float causes hover not to work in Internet Explorer

    Hi, I am needing some help to diagnose whether this is a IE specific known bug, and/or if there is a known fix.

    Problem 1
    I have made a menu dynamically driven from the modules/categories_tabs.php file, and it will display the icons and the 'hover' hyperlink text underneath. It works perfectly well in FireFox, but IE will not allow the hover to happen (neither will opera actually).

    I am applying an ID to the images DIV container as they are created, this way I should be able to control the layout of the icons via the stylesheet. The DIV ID (text_under) looks like this

    Code:
    #text_under {
    float: left;
    text-align: center;
    }
    I know the problem is related to how I have 'floated' the icons onto the page, because if I remove the 'float' style above the hovers work, but of course my icons now appear in a vertical list, whereas I need a horizontal one as seen here
    http://www.schneider-cabinets.co.uk

    Problem 2
    You will notice the first icon in the row is 'raised' higher than the other icons, if you drag your mouse across them in FF you will see there is something (perhaps padding) interferring with the alignment, obviously I need to be able to align the icons perfectly. Any suggestions?

    Problem 3
    If you go to any of my secure pages, the images I have used are not working, I think I may know why this is though, I think we declare a 'secure images' folder somewhere in one of the configs? I know I am using a seperate folder for these images, so I can change that if that is the case, thanks for any help.

  2. #2
    Join Date
    Apr 2006
    Location
    London, UK
    Posts
    10,569
    Plugin Contributions
    25

    Default Re: Float causes hover not to work in Internet Explorer

    Hi Paul

    A few things leap out at me.

    Firstly, I believe that this attempt to define an onload function is syntactically flawed
    <body id="indexBody" onload="window.onload=function(){
    Nifty("ul#nav a","small transparent top");
    }
    ;">
    I believe that because the Firefox validator doesn't seem to want to match the quotes that I have coluored, and then throws 5 warnings about this this body tag, which different browsers may well interpet differently. However, this is not an area in which I'm expert, so hopefully somebody else will be able to advise better on what would be correct syntax.

    Secondly, you have declared a div with ID of text_under in each category link. However, an ID can only occur once on each page, otherwise you may again get unpredicatable results from browser to browser. I'd recommend changing these to a class of text_under. They'll work in a very similar way, but multiple instances of classes are allowed and expected.

    Thirdly tag pairs must be nested. However, you appear to open two divs, and close none inside your category links. I suspect that the second is intended to close the first, not open a second. Once again different browsers may react differently and unpredictably to this error.

    I recommend clearing out these three issues and then seeing what your page looks like.

    Good luck
    Kuroi Web Design and Development | Twitter

    (Questions answered in the forum only - so that any forum member can benefit - not by personal message)

  3. #3
    Join Date
    Feb 2006
    Location
    UK
    Posts
    306
    Plugin Contributions
    1

    Default Re: Float causes hover not to work in Internet Explorer

    Hi Kuroi,
    you sure know your styles! OK firstly the javascript shouldn't have been there, it was another method I was trying, but decided to go with my current option forgetting to remove the script. I have done so now.

    Yes you are exactly correct, I should have used a SPAN, and now I have it seems to have cured the hover issue in IE. It has brought up a different error now, in that the text is above the image, but at least its the same in both browsers, so I would like to fix that.

    The first image still appearst to be higher on the horizontal plane than the others, not sure about that. In fact if you were to click on the sign in menu in IE you see what is happening here, as my images are not displayed but their place holders are, and as a result one can see what is happening, not sure yet of the solution but it seems I have some consistancy in error now.

    I don't fully understand your third suggestion, sorry. If possible could you expand further, thanks.

    Thanks again.


    Quote Originally Posted by kuroi
    Hi Paul

    A few things leap out at me.

    Firstly, I believe that this attempt to define an onload function is syntactically flawedI believe that because the Firefox validator doesn't seem to want to match the quotes that I have coluored, and then throws 5 warnings about this this body tag, which different browsers may well interpet differently. However, this is not an area in which I'm expert, so hopefully somebody else will be able to advise better on what would be correct syntax.

    Secondly, you have declared a div with ID of text_under in each category link. However, an ID can only occur once on each page, otherwise you may again get unpredicatable results from browser to browser. I'd recommend changing these to a class of text_under. They'll work in a very similar way, but multiple instances of classes are allowed and expected.

    Thirdly tag pairs must be nested. However, you appear to open two divs, and close none inside your category links. I suspect that the second is intended to close the first, not open a second. Once again different browsers may react differently and unpredictably to this error.

    I recommend clearing out these three issues and then seeing what your page looks like.

    Good luck

  4. #4
    Join Date
    Apr 2006
    Location
    London, UK
    Posts
    10,569
    Plugin Contributions
    25

    Default Re: Float causes hover not to work in Internet Explorer

    Firstly an answer to your questions
    Quote Originally Posted by Pauls
    I don't fully understand your third suggestion, If possible could you expand further, thanks.
    You were generating HTML that read something like
    <li class="categoryIcon"><a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&amp;cPath=1"><div id="text_underneath"><img class="text_underneath" src="../includes/templates/schneiderstyle/images/Flexline.gif" />Flexline<div></a> </li>
    As well as pointing out that this was leading to the ID text_underneath being used several times on the same page (not allowed), i was coming to the conclusion that the opening <div> highlighted in red above should have been a closing </div>.

    You may not like this but if I were doing what your attempting to do, I'd just simplify the whole thing dramatically. In particular, since the names of each category are built into the graphics, I'd drop the text altogether and then strip my php back so that it produces the following XHTML
    <!--bof-optional categories tabs navigation display-->
    <div id="navCatTabsWrapper">
    <div id="navCatTabs">
    <a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&amp;cPath=1"><img src="Schneider_files/Flexline.gif" /></a>
    <a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&amp;cPath=2"><img src="Schneider_files/Graceline.gif" /></a>
    <a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&amp;cPath=3"><img src="Schneider_files/Peakline.gif" /></a>
    <a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&amp;cPath=4"><img src="Schneider_files/Prideline.gif" /></a><a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&amp;cPath=9"><img src="Schneider_files/Proline.gif" /></a>
    <a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&amp;cPath=5"><img src="Schneider_files/Quadraline.gif" /></a><a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&amp;cPath=6"><img src="Schneider_files/Ronline.gif" /></a>
    <a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&amp;cPath=7"><img src="Schneider_files/Splashline.gif" /></a>
    </div>
    </div>
    <!--eof-optional categories tabs navigation display-->
    Then I would need only this CSS to style it
    #navCatTabs a {
    float:left;
    width:92px;
    }

    #navCatTabs img {
    border:none;
    }
    Whatever you do, you will need to do some work on the images themselves as even with perfect alignment the inconsistenies in size and borders mean that your layout would look odd. For example QUADRALINE is the widest, but also has extra white space built into the lefthand side of the image, so whatever you do it will end up pushed off to the right. Similarly, in its current form, GRACELINE will always end up being pushed down the page. Personally I'd make all the images the same size and then centre the actual content in the middle of the image. Then with all images having the same dimensions, aligning them gets a lot easier.

    Although your first image was appearing higher than the rest, in fact it was that the others were lower than the first image. OK that sounds like a daft thing to say, but it is more correct as the difference was due to the first images being floated freely to the left, while subsequent images had to clear the <li> tage for the previous category, which pushed them down by the depth of this tag.
    Kuroi Web Design and Development | Twitter

    (Questions answered in the forum only - so that any forum member can benefit - not by personal message)

  5. #5
    Join Date
    Feb 2006
    Location
    UK
    Posts
    306
    Plugin Contributions
    1

    Default Re: Float causes hover not to work in Internet Explorer

    Hi thanks for taking the time to reply,

    Quote Originally Posted by kuroi
    Firstly an answer to your questions
    You were generating HTML that read something likeAs well as pointing out that this was leading to the ID text_underneath being used several times on the same page (not allowed), i was coming to the conclusion that the opening <div> highlighted in red above should have been a closing </div>.
    I understand this part now, thanks for clarifying.
    Quote Originally Posted by kuroi
    You may not like this but if I were doing what your attempting to do, I'd just simplify the whole thing dramatically. In particular, since the names of each category are built into the graphics, I'd drop the text altogether and then strip my php back so that it produces the following XHTMLThen I would need only this CSS to style itWhatever you do, you will need to do some work on the images themselves as even with perfect alignment the inconsistenies in size and borders mean that your layout would look odd. For example QUADRALINE is the widest, but also has extra white space built into the lefthand side of the image, so whatever you do it will end up pushed off to the right. Similarly, in its current form, GRACELINE will always end up being pushed down the page. Personally I'd make all the images the same size and then centre the actual content in the middle of the image. Then with all images having the same dimensions, aligning them gets a lot easier.
    Correct, I wouldn't like it :) I had considered removing the text but felt it offered a better look, and a more menu type look to the navigation system. Regarding the images, I had no intention of leaving them in that state, they were quickly hacked in PS so that I could make haste on the functionality of the menu system - I didn't want to spend a lot of time on the gfx and then find I couldn't do what I was trying to do. However as you point out below this has nothing to do with the odd layout of the images.

    Quote Originally Posted by kuroi
    Although your first image was appearing higher than the rest, in fact it was that the others were lower than the first image. OK that sounds like a daft thing to say, but it is more correct as the difference was due to the first images being floated freely to the left, while subsequent images had to clear the <li> tage for the previous category, which pushed them down by the depth of this tag.
    I will find a solution for clearing the <li> tags for all the images as a matter of urgency :)

    One last note, I am actually considering scrapping this whole idea and instead simply building a style sheet rollover menu instead, however I do still like the idea of this menu being generated based on the categories added (and an appropriate image being created) though. For the addition of only one line of code to the PHP files concerned I thought it might be an elegant way of having a menu under the main header image that maybe other people could have used also, once I had it polished and working fully. For now I am still working on it, but that might change :)

    Once again, thanks for your input.

  6. #6
    Join Date
    Apr 2006
    Location
    London, UK
    Posts
    10,569
    Plugin Contributions
    25

    Default Re: Float causes hover not to work in Internet Explorer

    Quote Originally Posted by Pauls
    I am actually considering scrapping this whole idea
    It would be a shame to scrap this attractive layout because the CSS gets tough, so here's a simplified but fully working example of exactly what you are trying to do to act as an example for the CSS you need.
    Kuroi Web Design and Development | Twitter

    (Questions answered in the forum only - so that any forum member can benefit - not by personal message)

  7. #7
    Join Date
    Feb 2006
    Location
    UK
    Posts
    306
    Plugin Contributions
    1

    Default Re: Float causes hover not to work in Internet Explorer

    OK creating the list inline using a style sheet isn't really the problem, but thanks for creating the list.

    The problem appears to lie within the php line that creates this row dynamically, that is one can add style, but potentially only a single class for example.

    However this generated code is also affected by a style 'category-top' by this variable
    Code:
    $new_style = 'category-top';
    ... I am not sure what that does actually, but it appears to affect the 'text' part of the <li>, whereas my class 'text_under' only affects the image within the <li> and not the text.

    OK I am going to paste the PHP to show you what I have done within the page includes/modules/MYTEMPLATE/categories_tabs.php ... I believe this is where the problem actually is. The difficulties I am having are perhaps the reason this is not included with ZC as an option, and this is also why I am considering dropping this because there may be no realistic way it can be done where I am trying to do it. I will paste the code so you and others can see what I am trying to do.

    Code:
    $category_image = '<img class="text_under" src="../includes/templates/schneiderstyle/images/' . $categories_tab->fields['categories_name'] . '.gif" />'; 
    $links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' .(int)$categories_tab->fields['categories_id']) . '">' . $category_image . $categories_tab_current . '</a> ';
    $categories_tab->MoveNext();

  8. #8
    Join Date
    Apr 2006
    Location
    London, UK
    Posts
    10,569
    Plugin Contributions
    25

    Default Re: Float causes hover not to work in Internet Explorer

    Quote Originally Posted by Pauls
    OK creating the list inline using a style sheet isn't really the problem, but thanks for creating the list.
    Actually, I think that this is 50% of the problem. You're trying to achieve this with inline <li>s, but they need to be floated blocks.

    Quote Originally Posted by Pauls
    The problem appears to lie within the php line that creates this row dynamically, that is one can add style, but potentially only a single class.
    You can add as many classes as you like, just leave a space between each e.g.
    $new_style = 'category-top back';
    will result in an element with the classes category-top and back (which is a handy little class buried in the stylesheet that floats blocks left. However, the number of classes is a complete red herring. In the example that I produced I didn't use any classes at all, instead applying all the styling to tags. In practise you would need to preceed each tag with #navCatTabs to localise its effects, but you don't need any new classes, or even the ones you are already generating.

    Quote Originally Posted by Pauls
    This generated code is also affected by a style 'category-top' by this variable
    Code:
    $new_style = 'category-top';
    ... I am not sure what that does actually, but it appears to affect the 'text' part of the <li>, whereas my class 'text_under' only affects the image within the <li> and not the text.
    It doesn't do much at all, just add a border that is then overridden anyway. Another red herring.

    Quote Originally Posted by Pauls
    OK I am going to paste the PHP to show you what I have done within the page includes/modules/MYTEMPLATE/categories_tabs.php ... I believe this is where the problem actually is. The difficulties I am having are perhaps the reason this is not included with ZC as an option, and this is also why I am considering dropping this because there may be no realistic way it can be done where I am trying to do it. I will paste the code so you and others can see what I am trying to do.
    Code:
    $category_image = '<img class="text_under" src="../includes/templates/schneiderstyle/images/' . $categories_tab->fields['categories_name'] . '.gif" />'; 
    $links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' .(int)$categories_tab->fields['categories_id']) . '">' . $category_image . $categories_tab_current . '</a> ';
    $categories_tab->MoveNext();
    Your code seems to me to be pretty well there needing only a <br /> as shown below to force the text underneath the image (the other 50% of the solution), and this is only for IE's benefit. FF would do it anyway if you give the <li> block an appropriate width.
    $links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' .(int)$categories_tab->fields['categories_id']) . '">' . $category_image . '<br />' . $categories_tab_current . '</a> ';
    $categories_tab->MoveNext()
    My final observation would be that it is better avoid hardcoding path names, so your establishment of the image tag would be better done using the zen_image function as follows.
    $category_name = $categories_tab->fields['categories_name'];
    $category_image = zen_image($template->get_template_dir($category_name . '.gif', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . $category_name . '.gif', $category_name);
    This function checks your current template and builds the path to it. It also includes the important alt text.
    Kuroi Web Design and Development | Twitter

    (Questions answered in the forum only - so that any forum member can benefit - not by personal message)

  9. #9
    Join Date
    Feb 2006
    Location
    UK
    Posts
    306
    Plugin Contributions
    1

    Default Re: Float causes hover not to work in Internet Explorer

    Well, what a great knowledge you have Kuroi, thank you so much for your time and help, it works perfectly now. Your knowledge of the built in zen cart function to be used instead of hard coding the images path also cured the 'secure' page problem I mentioned earlier, because of course the images are now found in the declared path in the config file, brilliant!

    I am now going to attempt to make the following changes

    • Move the images closer to the main logo and slightly away from the breadcrumb menu
    • Using the style, create a rollover state for the menu buttons without the use of javascript
    • Possibly remove the text under the image - now the ALT tag is there this might be better?


    I don't know whether other people would want this when finished what do you think?

    Thanks for keeping me focused, and determined

    http://www.schneider-cabinets.co.uk/
    Last edited by Pauls; 9 Jun 2006 at 10:13 PM. Reason: Added url

  10. #10
    Join Date
    Apr 2006
    Location
    London, UK
    Posts
    10,569
    Plugin Contributions
    25

    Default Re: Float causes hover not to work in Internet Explorer

    I'm glad you stuck with it, and give yourself credit, you found the right places to make your chanegs and got pretty close to a solution, even without my help.

    I'm pleased about the 'secure' page problem resolving itself. I have to confess that I hadn't even noticed your description of that problem, as it occurred before my "fix these three things and then let's look again" comment. So I guess we have to chalk this one up to the good karma that comes from doing things properly.

    Would other people be interested? Well I stuck with this and hassled you a bit to keep going because I liked what you were trying to do, namely break out of the normal centre column plus boxes either side layout that typifies more Zen Carts than it should, so I guess other people may be interested. Not sure quite how you deliver it to them though, other than to finish your design at the same standard as you have started it, and then invite comments in the review section of the forum.

    Keep up the good work.
    Kuroi Web Design and Development | Twitter

    (Questions answered in the forum only - so that any forum member can benefit - not by personal message)

 

 
Page 1 of 3 123 LastLast

Similar Threads

  1. My web only work with IE(Internet explorer)
    By acutouch in forum General Questions
    Replies: 1
    Last Post: 8 Jan 2012, 01:27 PM
  2. Why don't the product links work in Internet Explorer?
    By rovinghouse in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 4 Feb 2011, 04:43 PM
  3. Replies: 1
    Last Post: 27 Nov 2010, 05:54 PM
  4. cart doesn't work in internet explorer
    By micbat in forum General Questions
    Replies: 4
    Last Post: 6 Mar 2007, 08:28 AM

Posting Permissions

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