SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image Floats and General layout help needed.

    Hi there,

    I am working on a site- just getting started. Still fairly new to CSS- just keep hacking away at it. Iam trying to take one element on the page at a time- i am now on images.

    It is a corporate site, so i have the homepage, left column with items like press releases, in the news, and events. I have press releases working okay, now i am trying to work on the In the News section, with images and text that are stacked. I seem to get varying results on IE, FireFox and Opera- and i am not sure what I am doing.

    I am trying to build it simply so that each section has it's own div, but i want the spacing beween each section to the be the same. iam not sure if i am explaing well, and I dont know the best way to show you my work so far. I have it here:

    the site

    Thanks!
    sha
    CSS Code
    Code:
    BODY {
    	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #c0c0c0 left top; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
    }
    #page {
    	MARGIN: 0px auto;
    	WIDTH: 750px;
    	BACKGROUND-COLOR: #ffffff;
    	padding: 0px;
    }
    #footer {
    	FONT-SIZE: 9px;
    	WIDTH: 750px;
    	COLOR: #666666;
    	LINE-HEIGHT: 14px;
    	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    	TEXT-ALIGN: center;
    	margin-right: auto;
    	margin-left: auto;
    	background-color: #FFFFFF;
    	padding-top: 10px;
    	padding-bottom: 10px;
    }
    #content {
    	PADDING-RIGHT: 0px;
    	PADDING-LEFT: 0px;
    	PADDING-BOTTOM: 20px;
    	MARGIN: 0px auto;
    	WIDTH: 750px;
    	PADDING-TOP: 0px;
    	background-color: #FFFFFF;
    	border: 8px solid #FFFFFF;
    }
    #maincontent {
    	FLOAT: right;
    	FONT: 12px/17px Georgia, "Times New Roman", Times, serif;
    	VERTICAL-ALIGN: baseline;
    	WIDTH: 530px;
    	COLOR: #666666;
    	TEXT-ALIGN: left;
    	padding-right: 20px;
    	padding-left: 5px;
    	background-color: #FFFFFF;
    }
    div#sidebar {
    	FLOAT: left;
    	FONT: 10px Verdana, Arial, Helvetica, sans-serif;
    	WIDTH: 180px;
    	COLOR: #666666;
    	TEXT-ALIGN: left;
    	padding-left: 5px;
    	padding-right: 5px;
    	background-color: #FFFFFF;
    }
    
    #sidebar H1 {
    	FONT-SIZE: 12px;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-variant: normal;
    	font-weight: bold;
    	border-bottom-width: 1px;
    	border-bottom-style: dashed;
    	border-bottom-color: #C5B998;
    	line-height: 1.6em;
    	color: #0066CC;
    	letter-spacing: 0.1em;
    	padding-left: 2px;
    }
    
    #sidebar A:link {
    	COLOR: #0066CC;
    	text-decoration: none;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    }
    
    #sidebar A:visited {
    	COLOR: #0066CC;
    	text-decoration: none;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    }
    
    #sidebar A:active {
    	COLOR: #0066CC;
    	text-decoration: none;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    }
    
    #sidebar A:hover {
    	COLOR: #CC0033;
    	text-decoration: underline;
    }
    
    .clear {
    	CLEAR: both;
    	padding-top: 1px;
    	padding-bottom: 1px;
    }
    #logo A {
    	FONT-SIZE: 1px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
    }
    
    div#navcontainer
    {
    background-color: #CC9900;
    border-top: 1px solid #FFFFFF;
    }
    
    div#navcontainer ul
    {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	color: white;
    	text-align: left;
    	margin: 0;
    	padding-bottom: 5px;
    	padding-top: 5px;
    	font-size: 11px;
    	font-variant: small-caps;
    }
    
    div#navcontainer ul li
    {
    display: inline;
    margin-left: -4px;
    }
    
    div#navcontainer ul li a
    {
    padding: 5px 10px 5px 10px;
    color: white;
    text-decoration: none;
    border-right: 1px solid #fff;
    }
    
    div#navcontainer ul li a:hover
    {
    background-color: #16008D;
    color: white;
    }
    
    #active a { border-left: 1px solid #fff; }
    
    #banner {
    	BACKGROUND-IMAGE: url(images/splash_set_f02.jpg); WIDTH: 750px; HEIGHT: 136px
    }
    
    A:link {
    	COLOR: #0066cc
    }
    A:visited {
    	COLOR: #0066cc
    }
    A:active {
    	COLOR: #0066cc
    }
    A:hover {
    	COLOR: #0066cc; TEXT-DECORATION: none
    }
    H1 {
    	FONT: 24px/24px Georgia, "Times New Roman", Times, serif; VERTICAL-ALIGN: baseline; COLOR: #a14117; TEXT-ALIGN: left
    }
    #sidebar UL {
    	PADDING-LEFT: 0px; MARGIN: 0px; LIST-STYLE-TYPE: none
    }
    #sidebar UL LI {
    	PADDING-RIGHT: 0px; PADDING-LEFT: 17px; FONT-SIZE: 11px; BACKGROUND: url(images/0029_doc.png) no-repeat 0px 2px; PADDING-BOTTOM: 8px; COLOR: #000033; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
    }
    #pressrelease {
    	padding: 0px 4px;
    	border: 1px solid #CCCCCC;
    	width: 170px;
    	height: auto;
    	margin-bottom: 20px;
    }
    #pressrelease UL {
    
    	PADDING-LEFT: 0px; MARGIN: 0px; LIST-STYLE-TYPE: none
    }
    #pressrelease UL LI {
    
    	PADDING-RIGHT: 0px; PADDING-LEFT: 17px; FONT-SIZE: 11px; BACKGROUND: url(images/0029_doc.png) no-repeat 0px 2px; PADDING-BOTTOM: 8px; COLOR: #000033; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
    }
    #pressrelease H1 {
    
    	FONT-SIZE: 12px;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-variant: normal;
    	font-weight: bold;
    	border-bottom-width: 1px;
    	border-bottom-style: dashed;
    	border-bottom-color: #C5B998;
    	line-height: 1.6em;
    	color: #0066CC;
    	letter-spacing: 0.1em;
    	padding-left: 2px;
    }
    #news {
    	width: 170px;
    	padding: 0px 4px;
    	border: 1px solid #CCCCCC;
    	height: 190px;
    	margin-bottom: 20px;
    }
    #news H1 {
    
    
    	FONT-SIZE: 12px;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-variant: normal;
    	font-weight: bold;
    	border-bottom-width: 1px;
    	border-bottom-style: dashed;
    	border-bottom-color: #C5B998;
    	line-height: 1.6em;
    	color: #CC0000;
    	letter-spacing: 0.1em;
    	padding-left: 2px;
    }
    
    .floatimgleft {
    	BACKGROUND: #ffffff;
    	FLOAT: left;
    	MARGIN: 3px 8px 4px 0px;
    	padding: 3px;
    	border: 1px solid #CCCC99;
    	clear: left;
    }
    
    .floatimgleft:hover   {
    	BACKGROUND: #ffffff;
    	FLOAT: left;
    	MARGIN: 3px 8px 4px 0px;
    	padding: 3px;
    	border: 1px solid #CC6600;
    	clear: both;
    }
    
    #events {
    	width: 170px;
    	padding: 0px 4px;
    	border: 1px solid #CCCCCC;
    	height: auto;
    }
    #events H1 {
    
    	FONT-SIZE: 12px;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-variant: normal;
    	font-weight: bold;
    	border-bottom-width: 1px;
    	border-bottom-style: dashed;
    	border-bottom-color: #C5B998;
    	line-height: 1.6em;
    	color: #009933;
    	letter-spacing: 0.1em;
    	padding-left: 2px;
    }
    HTML Code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    </head>
    <link href="screen.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="content">
    
    <div id="logo"><a class="imagelink" title="Home Page" 
    href="http://www.eschergroup.com/"><img 
    src="images/PLA-443_Logo.gif" 
    alt="Welcome to Escher Group." width="750" height="76" 
    border="0" /></a></div>
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">About Us</a></li>
    <li><a href="#">In the News</a></li>
    <li><a href="#">Our Customers</a></li>
    <li><a href="#">Products & Services</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>
    <div id="banner"></div>
    <div class="clear"></div>
    
    <div id="maincontent"></div>
    
    <div id="sidebar">
      <DIV id="pressrelease">
        <h1>Press Releases</h1>
        <ul>
          <li><a href="#">Escher Group welcomes Elmar Toime as Consultant</a></li>
          <li><a href="#">Escher Group Announces New IBM Center of Excellence will Feature WebRiposte™ Products</a></li>
          <li><a href="#">Escher Group selected by Postkantoren for Counter Automation Project</a></li>
          <li><a href="#">Escher Group and IBM Win Postal Counter Automation Project in Norway</a></li>
        </ul>
      </div>
    
      <div id="news">
        <h1>In the News</h1>
        <p><IMG src="images/homepage_postaltech0312.gif" alt="Postal Technology" class=floatimgleft /><a href="#">Escher Group featured in
         Postal Technology article (1349Kb)</a></p><br />
        <p><IMG src="images/InsightV4_2_homepage.gif" alt="Postal Technology" width="38" height="52" class=floatimgleft />
    	<a href="#">Read the latest issue of Insight</a> </p>
      </div>
    
    
      <div id="events">
        <h1>Events</h1>
        <p><a href="#"><IMG src="images/event_userconference.gif" alt="User Conference 2005" border="0" class=floatimgleft /></a><a href="#">User Conference 2005. Deatils to come. </a></p>
    
        <p><IMG src="images/event_pe2005.jpg" alt="Post Expo 2005" width="60" height="60" class=floatimgleft /><a href="#">Post Expo 2005 This year’s Post-Expo will be held October 3 – 5 at the Paris Nord exhibition center in Paris, France.</a></p>
    </div>
    
    
    <DIV id=thumbnails>
      <p>&nbsp; </p>
      <p>&nbsp;</p>
      <p>&nbsp;                </p>
    </DIV>
    
    
    </div>
    
    <div class="clear"></div>
    <div id="footer">
    <p>© 2005 Escher Group Limited. All rights reserved. <a href="#">Legal</a></p> 
    <p><a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">In the News</a> | <a href="#">Our Customers</a> | <a href="#">Products & Services</a> | <a href="#">Support</a> | <a href="#">Contact</a> </p>
    </div>
    
    </div></DIV>
    </body></html>
    Last edited by shaparis; May 11, 2005 at 10:33.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You seem to have run into the issue of IE/Win wrongly expanding containers of floated elements to completely contain the floats.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure what you mean, a little more detail for a newbie what do i need to do to fix that?

    thanks!
    sha
    Last edited by shaparis; May 11, 2005 at 14:22.

  4. #4
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure what you mean, a little more detail for a newbie what do i need to do to fix that?

    thanks!
    sha

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    would i do better to place it in a list?

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

    Floats are renmoved from the flow and will stick out of their parent container if not contained. This is what mozilla does but ie doesn't. If you want the images and the text to clear the items above then you will need to set the p to :clear:both so that it starts on a new line.

    e.g.
    Code:
    #events p {clear:both}

  8. #8
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that seemed to take care some of it...

    but- i dod notice that on IE there looks to be too much space between each event item- yet on FireFox it looks better- is there anyway to get it to look consistent on all browsers?

    thanks!

    -sha

  9. #9
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there a hack for ie- so things will look consistent across all browsers?

    thanks!
    sha

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use the clear property to make other browsers act like IE, but I don't know of any way to make IE handle floats properly.

    You can change the margins and padding and if neccasary use filters to give IE some relative positioning to make things look the same.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An observation I made about your CSS is that everything is capitalized. It's better not to do that because if I am correct uppercase is not valid. Use lowercase instead.
    I will not flame the newbies,
    I will not flame the newbies,
    I will flame the newbies...
    Table free is the way to be!

  12. #12
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, when using XHTML, CSS should be lowercase.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  13. #13
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    Yes, when using XHTML, CSS should be lowercase.
    Precisely what I meant. Even if you aren't using XHTML, it's still a good idea to be ready for the future...
    I will not flame the newbies,
    I will not flame the newbies,
    I will flame the newbies...
    Table free is the way to be!

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    i dod notice that on IE there looks to be too much space between each event item- yet on FireFox it looks better- is there anyway to get it to look consistent on all browsers?
    If you are talking about the default spacing that is applied to elements then you need to explicitly control the padding and margins of those elements.

    These days I usually use the universal selector(*) to set all paading and margins tozero right at the top of the stylesheet.
    Code:
    * {margin:0;padding:0}
    That will set all browsers to the same zero defaults and then you can apply the exact padding and margins that you require for consistent results. Remember that lists need a left padding (or margin) in order for the bullets to appear so you also need to set that manually when using the method above.

    If your question is about bugs with floats then the faq has large entry on floats that covers nearly all their misbehaviours and show you how to fix them. I have no troubles with floats and once you know the little bugs and behaviors they work well and consistently.

  15. #15
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks to everyone for your comments and help- i keep working on it- i am sure i will be back!

    thanks!
    sha


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
  •