SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Niagara
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy IE 6 Problem - Highlighting text highlights the whole DIV

    I looked around the forum a bit, and couldn't find a definite solution to this problem.

    Please checkout:
    http://www.yourmetalstore.com/washed...page=catalogue

    CSS for all constant elements (menus, footer, anything other than content:
    http://www.yourmetalstore.com/washed...ss/default.css

    CSS for all the content:
    http://www.yourmetalstore.com/washed.../catalogue.css


    In Firefox it works as it should, all CSS and HTML are valid and checked out fine. I simply can't wrap my head around this problem and have no idea where to begin as far as correcting it in IE.

    Thanks,

    Justin

  2. #2
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, in IE it's definately selecting the "Content" DIV whenever you try to grab any subsection of it... and I'm willing to take a guess as to the 'problem':

    #content {
    position: relative;

    Position relative + IE = broken... Use a margin instead to move it around... As a rule in any browser position:relative is a BAD idea if you don't already have a margin set - especially since most of the time you can replicate the functionality with a margin.

    Might not be the cause, but it's a good place to start. Good rule of thumb, stay away from position:relative unless it's really, REALLY necessary.

  3. #3
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh and if I might suggest a change, you went a bit div happy, and aren't using much in the way of meaningful markup... You could save yourself a half dozen classes -
    Code:
    <div class="item_container">
    	<h3>Title</h2>
    	<a href="index.php?page=product&amp;id=0001" class="item_picture">
    		<img src="products/small/0001.jpg" alt="title of product" title="title of product" />
    	</a>
    	<p>
    		This is a short description of the item. This is a short description of the item. 
    		This is a short description of the item. This is a short description of the item. 
    		This is a short description of the item. This is a short description of the item.
    	</p>
    	<strong>$123.45</strong>
    	<ul>
    		<li>More Details</li>
    		<li class="last">Add to Cart</li>
    	</ul>
    </div>
    Just a thought.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    deathshadow, your example has an HTML error in it. You opened the header as an H3 element, but closed it as if it were an H2. Just thought I'd let you know.

  5. #5
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    deathshadow, your example has an HTML error in it. You opened the header as an H3 element, but closed it as if it were an H2. Just thought I'd let you know.
    Oops, what I get for typing code in the little tiny forum box instead of in win32pad like I usually do.

    Seriously, you could fit more characters on the screen of a trash-80 model 1 than you could these entry boxes.

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <strong>$123.45</strong>
    Shouldn't that also be wrapped in a block level element (or least a tag that says something about what the content is rather than it should be bold)?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Deathshadow was very close with the answer But the problem is a known problem with ie in standards mode and it is actually position:absolute not relative that stops text being highlighted in IE6 and is a major bug. In quirks mode there is no problem.

    There is no solution in IE6 except to either use quirks mode or to use a different positioning system. It looks like n your example you can simply place the container using margins but I didn't test with all your js functions as it looks like you are using a mimmax script.

    Code:
    #container{
        padding-top: 125px;
    	margin-left: 170px;
    	width: 800px;
    	height: auto;
    	border: solid 0px #000000;
    }

    Deathshadows other comments are right on the money though

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Niagara
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot guys, here was the final solution.

    Code:
    #container{
    	position: relative;
    	padding-top: 125px;
    	margin-left: 170px;
    	width: 800px;
    	height: auto;
    	border: solid 0px #000000;
    }
    PS. Deathshadow: You're right, I did go a little DIV crazy.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Glad it worked

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Niagara
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Glad it worked
    Too bad you don't live near by, I'd invite you over for a beer for saving me from spending relentless hours trying to figure it out.


Bookmarks

Posting Permissions

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