Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Jun 2010
    Posts
    2
    Member #
    22257
    I have recently run into an interesting problem with browsers and images that I cannot figure out for the life of me.
    I recently took an Internet Marketing position with a local company that sells tools and fasteners to contractors worldwide. The website is built in Magento which is a very robust and flexible CMS/ store program.
    The main problem I'm having is the company lists their toll-free # right underneath the logo where it's visible always on Mozilla browsers but only half the time on IE browsers. What really bakes my noodle is even using IE 8 it only fully displays the entire number about half the time.
    I have tried everything I can think of: changed the screen resolutions on all the affected computers; tinkered with the CSS by adding an IE8 attribute; and a few other minor changes as well.
    The website is www.wholesalepowertools.com/ . For those that do view it using IE8 it may look perfectly normal as it does for me on some of the PC's I use. I'm hoping somebody will view it with the phone number cut in half and then be able to hopefully offer me some clue as to what's happening.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,731
    Member #
    5580
    Liked
    718 times
    There are so many CSS files, that I can't find the right place ...

    So, where you have this line in the "header" file (see red),

    <!-- start header -->
    <div class="header">

    <div class="header-top-container">
    <div class="header-top">


    Change that line to:
    <div class="header-top" style="height:99px;">



    =============

    On a different topic,
    If you mouse over the logo on the top, you'll see the size of the image link
    is way smaller than the "wholesale power tools" logo. That's because the
    GIF image called "logo.gif" is only 221 X 62 pixels in size. Create a new GIF
    image that matches the size of your logo ... it's a GIF image with a transparent
    color, so it is invisible when placed on the header background. They just use
    that transparent GIF as a link.


    =============

    EDIT:
    Also realize that you have several if statements that load different CSS files
    depending on version if IE. Your problem probably begins in one of those
    CSS files ... used for IE hacks. Not a good idea to use those if statements
    for IE, but they have them there, so leave them for now.



    .


  4. #3
    Junior Member
    Join Date
    Jun 2010
    Posts
    2
    Member #
    22257
    Nothing I try seems to be working.I cannot locate the style sheet to change the attributes. I made the transparent gif larger but it caused a big gap to appear between the top of the nav bar and the bottom of the logo.
    I'm more stumped now than ever.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,731
    Member #
    5580
    Liked
    718 times
    I think I found the place ...

    In this file:
    http://www.wholesalepowertools.com/s.../css/boxes.css

    Pertaining to the class called: header_top_container

    /* Style */
    /*.header { border-top:5px solid #0d2131; }*/
    /*.header-top-container { border-bottom:1px solid #415966; background:url(../images/header_top_container_bg.jpg) repeat-x 50% 0; }*/
    .header-top-container { background:url(../images/main_container_bg.gif) no-repeat 50% 0 ; } /*fbfaf6*/
    .header-top { padding:10px; background:url(../images/header_top_container_bg.jpg) repeat-x 50% 0;}
    /*.header-nav-container { background:url(../images/nav_bg.jpg) repeat-y 50% 0 #0a263d; }*/
    .header-nav-container { background:url(../images/main_container_bg.gif) no-repeat 50% 0 ; } /*fbfaf6*/
    .header-nav { background: url(../images/nav_bg_cust.jpg) }
    .middle-container { background:url(../images/main_container_bg.gif) no-repeat 50% 0 ; } /*fbfaf6*/
    .middle { background:url(../images/main_bg.gif) no-repeat #fffffe; padding:25px 25px 80px 25px; }



    I see that some are commented-out. But try some things like shown in red ...

    /* Style */
    /*.header { border-top:5px solid #0d2131; }*/
    /*.header-top-container { border-bottom:1px solid #415966; background:url(../images/header_top_container_bg.jpg) repeat-x 50% 0; }*/
    .header-top-container { background:url(../images/main_container_bg.gif) no-repeat 50% 0 ; height:99px; } /*fbfaf6*/
    .header-top { padding:10px; background:url(../images/header_top_container_bg.jpg) repeat-x 50% 0;}
    /*.header-nav-container { background:url(../images/nav_bg.jpg) repeat-y 50% 0 #0a263d; }*/
    .header-nav-container { background:url(../images/main_container_bg.gif) no-repeat 50% 0 ; } /*fbfaf6*/
    .header-nav { background: url(../images/nav_bg_cust.jpg) }
    .middle-container { background:url(../images/main_container_bg.gif) no-repeat 50% 0 ; } /*fbfaf6*/
    .middle { background:url(../images/main_bg.gif) no-repeat #fffffe; padding:25px 25px 80px 25px; }



Remove Ads

Posting Permissions

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

Search tags for this page

aftereffects cs6 imaging getting cut off

,

caroufredsel cutting off

,

css - ie8 img cut off

,

html image getting cut off

,

ie img css link cut off

,

image cut off in html

,

logo image cut in half css

Click on a term to search for related topics.
All times are GMT -6. The time now is 04:53 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com