SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy DIV Positioning, Wrapping, Hover

    I finished all my pages so far and I just have that annoying positioning problem. I have been at it for quite some time now. And I just cannot get it to position properly in IE and Opera.

    First: <div id="categoryPics"> and <div id="categoryTitles">: IE browser-- Keeps wrapping when IE browser window is resized

    Second: <div id="categoryTitles">: IE browser-- The hover property is using white space in the margin as a link for:

    .learningTextPos {
    margin-right: 65px;
    }

    .workshopTextPos {
    margin-right: 50px;
    }

    .learningTextPos {
    margin-right: 65px;
    }

    .keynoteTextPos {
    margin-right: 50px;
    }

    Second: <div id="categoryTitles">: Opera and IE browser-- I would like them lined up under <div id="categoryPics"> without wrapping when browser resized and cross browser

    I am getting confused the longer I look at this code. Maybe I am just staring at this screen too long

    http://www.stc.org/54thConf/

  2. #2
    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)
    Not really seeing problem 1 but for 2 & 3, your images and text below them should go in the same list item; you don't need two separate lists. You also don't need the spans that you're using to create space. Simply float the list items left (which you've done) or even use display: inline with text-align: center on the ul which will centre them better, and give the list items a width and some margins either side.

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

    Your category pics don't wrap in other browsers because you have given the body a min-width of 758px which ie6 and under don't understand.

    You could simply set the categorypics to 758px width and then they won't wrap.

    Code:
    #categoryPics {
    	text-align: left;
    	margin:0;
        width:758px;
    }
    However that assumes that they are never going to be bigger than that.

    Alternatively look at the faq on min-width and use an expression for ie to emulate the min-width.

  4. #4
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Tyssen. Sorry if i did not communicate it properly but I do not want it centered in the page but the in IE/Opera, the text centered below the pics.

    Thanks Paul I will look that info up.

    Is it my markup that is having the hover effect in IE highlight the white space?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes as Tyssen said get rid of the spans and you can apply the class to the anchor directly.

    Code:
    		<div id="categoryTitles">
    			<ul>
    				<li><a class="workshopTextPos"href="workshops/index.aspx">Pre-conference Workshops</a></li>
    				<li><a class="learningTextPos" href="sessions/index.aspx">Learning Sessions</a></li>
    				<li><a class="keynoteTextPos"href="keynote/index.aspx">Keynote speakers</a></li>
    				<li><a class="networkingTextPos"href="networking/index.aspx">Networking opportunities</a></li>
    			</ul>
    		</div>

  6. #6
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay thanks again Paul, I managed to get it working. I am left with the annoying em, px issue. Is there a reason why my text is not lining up the way it does in FF? IE6 measurements do not convert properly.

  7. #7
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul I do not have time right now but I am going to go back and read up on some of the articles you posted on CSS. Interesting topics.

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

    the differences are probably where you haven't taken account of the default margins and padding which you need to set explicitly to make sure they are the same.

    As Tyssen said you can reduc ethe images and captions into one list as floows,

    Code:
    		<div id="categoryPics">
    			<ul>
    				<li><img src="http://www.stc.org/54thConf/images/categoryPic01.jpg" width="150" height="148" alt="" title="" /><br /><a href="workshops/index.aspx">Pre-conference Workshops</a></li>
    				<li><img src="http://www.stc.org/54thConf/images/categoryPic02.jpg" width="150" height="148" alt="" title="" /><br /><a  href="sessions/index.aspx">Learning Sessions</a></li>
    				<li><img src="http://www.stc.org/54thConf/images/categoryPic03.jpg" width="150" height="148" alt="" title="" /><br /><a href="keynote/index.aspx">Keynote speakers</a></li>
    				<li><img src="http://www.stc.org/54thConf/images/categoryPic04.jpg" width="150" height="148" alt="" title="" /><br /><a href="networking/index.aspx">Networking opportunities</a></li>
    			</ul>
    		</div>
    		<!--// End categoryPics //-->
    		<div id="categoryDate">
    Code:
    #categoryPics {
    	text-align: left;
    	margin:0;
    }
    
    #categoryPics ul {
    	margin:0 0 0 .5em;
    	padding: 0;
    	list-style: none;
     overflow:hidden;
    }
    
    #categoryPics ul li{
    	float:left;
    	margin-left: 1em;
    	padding:0;
     text-align:center;
     display:inline;/* ie bug*/
    }
    #categoryPics ul li img{
    	margin-bottom:1em;
    }
    #categoryPics ul li a{
    	text-decoration:none;
    }
    Hope it helps

  9. #9
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for all your help.


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
  •