SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS problem in IE7

    Hi,

    I'm working on a couple of sites currently and have just noticed that there's a bug in my code with IE7 browsers. Basically, I'm trying to display a horizontal menu and the search module in the same horizontal space. The way I've done it works fine in the latest browsers, but not in IE7. Can someone point me in the right direction please...

    Thanks for any help.


    URL: http://www.hheadtc.myzen.co.uk/

    CSS:
    Code:
    body {
       font-family: Arial, Helvetica, sans-serif;
       font-size:12px;
       background-color:#ffffff;
       background-image:url(../images/background-gradient.png);
       background-repeat:repeat-x;
    }
    
    
    h2 {
    }
    h3 {
    font-size:1.1em;
    }
    
    
    #wrapper{
       width:990px;
       margin:auto;
    }
    
    #header{
       background-image:url(../images/shadow-width.png);
       background-repeat: repeat-y;
    }
    
    #header-top{
       text-align:right;
       height:43px;
       background-image:url(../images/shadow-top.png);
       background-repeat:no-repeat;
       padding-right:32px;
       padding-top:15px;
       color:#FFFFFF;
    }
    
    #logo{
       float:left;
       height:281px;
       width:307px;
       background-image:url(../images/towncouncil-logo.gif);
       background-repeat:no-repeat;
       background-color:#FFFFFF;
       margin-left:32px;
    }
    
    #header_graphic{
       float:right;
       height:281px;
       width:619px;
       /*background-image:url(../images/head-anchor.jpg);
       background-repeat:no-repeat;
       background-color:#FFFFFF;*/
       margin-right:32px;
    }
    
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Top Menu xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    #search {
       float:right;
       padding-top:8px;
       padding-right:40px;
    
    }
    
    #topmenu {
       /*border:solid 1px;*/
       clear:both;
       padding-top:5px;
       background-image:url(../images/shadow-width.png);
       background-repeat: repeat-y;
       font-size:17px;
       font-weight:normal;
    
    }
    
    
    #topmenu ul {
       padding:0px;
       padding-top:11px;
       margin:auto;
       height:42px;
       /*border:solid 1px;*/
       width:926px;
       list-style:none;
       background-image:url(../images/top-menu-grey.png);
       background-repeat: repeat-x;
       }
    
    #topmenu li {
       display:inline;
    }
    
    #topmenu li:hover {
    }
    
    #topmenu a {
       /*border:solid 1px #000000;*/
       text-decoration:none;
       color:#FFFFFF;
       padding:11px 13px 12px 13px;
       background-image:url(../images/top-separater.gif);
       background-repeat:no-repeat;
       background-position:right;
    }
    
    #topmenu a:hover {
       background-color: #D9B11E;
       
    }
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Top Menu xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    
    #searchbox{
       float:right;
    }
    
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx CONTENT xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    
    #content {
       /*border:solid 1px #000000;*/
       background-image:url(../images/shadow-width.png);
       background-repeat:repeat-y;
    }
    
    #clearall {
       clear:both;
    }
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx LEFT xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    
    #left {
       float:left;
       width:215px;
       margin-left:15px;
       margin-right:15px;
       margin-top:10px;
       margin-bottom:50px;
       padding:0px;
       padding-left:18px;
       /*border:1px solid #000000;*/
    
    }
    
    #left h3{
       color:#ffffff;
       background-color:#7B199B;
       padding:5px 5px 5px 11px;
       margin:0;
       margin-bottom:0px;
       font-size:15px;
       font-weight:normal;
       font-style:normal;
       vertical-align: middle;
    }
    
    #left .moduletable_events h3{
       background-color:#FF7F00;
    }
    
    #left .moduletable_latest h3{
       background-color:#BF0000;
    }
    
    #left ul{
       padding:0;
       margin:0;
       margin-bottom:15px;
       list-style-type:none;
       background-color:#E5E5E5;
    }
    
    
    #left li{
       display:block;
       border-top: solid 1px #ffffff;
    }
    
    #left li:hover{
       background-color:#D3D3D3;
    }
    
    #left .contentpaneopen {
       padding-left:15px;
       padding-right:15px;
    
    }
    
    #left a {
       display:block;
       text-decoration:none;
       padding:7px 5px 7px 25px;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-weight:normal;
       font-size:13px;
       background-image:url(../images/bullet.png);
       background-repeat:no-repeat;
       background-position:0;
       color:#3F3F3F;
       
    }
    
    #left a:link {
    
    }
    
    #left a:visited {
    }
    
    #left a:hover {
    
    }
    #left a:active {
    }
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Right xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    
    #right {
       float:right;
       width:215px;
       margin-left:15px;
       margin-right:15px;
       margin-top:0px;
       margin-bottom:50px;
       padding:0px;
       padding-right:18px;
       /*border:1px solid #000000;*/
    
    }
    
    
    
    #right h3{
       color:#ffffff;
       background-color:#FF7F00;
       padding:5px 5px 5px 11px;
       margin:0;
       margin-bottom:0px;
       font-size:15px;
       font-weight:normal;
       font-style:normal;
       vertical-align: middle;
    }
    
    #right .moduletable_poll h3{
       background-color:#00A33D;
    }
    
    
    
    
    #right .moduletable_poll{
       background-color:#E5E5E5;
       font-size:13px;
    }
    
    #right .poll_poll{
       padding-top:7px;
    }
    
    #right ul{
       padding:0;
       margin:0;
       margin-bottom:15px;
       list-style-type:none;
       background-color:#E5E5E5;
    }
    
    
    #right li{
       display:block;
       border-top: solid 1px #ffffff;
    }
    
    #right li:hover{
       background-color:#D3D3D3;
    }
    
    #right .contentpaneopen {
       padding-left:15px;
       padding-right:15px;
    
    }
    
    #right a {
       display:block;
       text-decoration:none;
       padding:7px 5px 7px 25px;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-weight:normal;
       font-size:13px;
       background-image:url(../images/bullet.png);
       background-repeat:no-repeat;
       background-position:0;
       color:#3F3F3F;
       
    }
    
    #right a:link {
    
    }
    
    #right a:visited {
    }
    
    #right a:hover {
    
    }
    #right a:active {
    }
    
    #right .search {
       margin-top:10px;
       background-color: #999999;
       padding:5px;
    }
    
    #right a.rightimage {
       text-decoration:none;
       padding:0px;
       background-image:none;
    }
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Centre xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    
    #mainbody {
       font-size:15px;
       margin:0;
       padding:0;
       padding-top:8px;
       color:#3F3F3F;
       line-height:18px;
       /*width:485px;*/
       margin-left:251px;
       /*border:1px solid #000000;*/
       }
    
    .contentheading {
       color:#393491;
       font-size:26px;
       font-weight:normal;
       padding-left:0px;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       padding-bottom:15px;
    }
    
    h1 {
       font-weight: normal;
       font-size:18px;
       color:#393491;
       /*background-color: #EAEAEA;*/
       padding:4px 4px 4px 0px ;
       border-bottom:1px solid #393491;
    }
    .home_title{
       margin-top:0px;
       background-color: #393491;
       padding:5px 10px 5px 10px;
       font-size:18px;
       color:#FFFFFF;
       margin-bottom:5px;
    }
    .home_text{
       background-color:#E2E2F2;
       padding:5px 10px 5px 10px;
    }
    
    .small {
       font-size:11px;
       color:#999999;
       line-height:12px;
    }
    
    .createdate {
       line-height:12px;
       font-size:11px;
       color:#999999;
    }
    
    #mainbody img{
       padding:5px;
       margin:5px 15px 5px 5px ;
       border:1px solid #999999;
    }
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Polls xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    #mainbody .pollstableborder{
       
          /*width:450px;
       border:1px solid #000000;*/
    }
    #mainbody .pollstableborder img{
       border:none;
       }
    
    #mainbody .smalldark{
       width:100px;
       padding-left:15px;
       font-size:12px;
    /*   border:1px solid #000000;*/
    }
    
    #mainbody .sectiontableentry1{
       text-align:center;
       background-color: #E4E4E4;
    }
    
    #mainbody .sectiontableentry0{
       text-align:center;
       background-color: #EFEFEF;
    }
    
    #mainbody .componentheading{
       color:#393491;
       font-size:26px;
       font-weight:normal;
       padding-left:0px;
       line-height:28px;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       padding-bottom:15px;
    }
    
    /* xxxxxxxxxxxxxxx Poll Module xxxxxxxxxxxxxxxxxxxxx */
    #right .pollstableborder_poll {
       width:100%;
    
    }
    #right .sectiontableentry1_poll {
       padding:3px;
    }
    #right .sectiontableentry2_poll {
       padding:3px;
    }
    
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Footer Menu xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    
    #footer .moduletable_footer_info{
       color:#8C8C8C;
    }
    
    #footer{
       text-align:center;
       clear:both;
       background-image:url(../images/shadow-width-grey.png);
       background-repeat: repeat-y;
       margin:0px;
    }
    
    
    #footer ul {
       padding:0px;
       padding-top:11px;
       margin:auto;
       height:42px;
       /*border:solid 1px;*/
       width:926px;
       list-style:none;
       }
    
    #footer li {
       display:inline;
    }
    
    #footer li:hover {
    }
    
    
    #footer a {
       text-decoration:none;
       color:#666666;
       border-right:1px solid #666666;
       padding:0px 10px 0px 10px;
       
    }
    
    #footer a:link {
       
    }
    
    #footer a:visited {
       
    }
    
    #footer a:hover {
          color: #333333;
    
    }
    #footer a:active {
       
    }
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Footer Info xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    
    #footer .moduletable_footer_info{
       color:#8C8C8C;
    }
    
    #footer .moduletable_footer_info a {
       text-decoration:none;
       color:#8C8C8C;
       border:none;
       padding:0px;
       
    }
    
    #footer .moduletable_footer_info a:hover {
       color:#333333;
    }
    
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Credits xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    #credits{
       background-image:url(../images/shadow-bottom-grey.png);
       background-repeat: no-repeat;
       margin:0px;
       height:50px;
       padding-top:30px;
       color:#999999;
       font-size:10px;
    }
    
    
    
    
    
    
    
    
    a:link {
    }
    a:visited {
    }
    a:hover {
    }
    a:active {
    }
    
    a:link img {
       border:none;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, you have an XML declaration above hte doctype
    Code:
    <?xml version="1.0" encoding="utf-8"?><!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" xml:lang="en-gb" lang="en-gb" dir="ltr" >
    <head>
    That's triggering quirks mdoe for all of IE. Remove that . See if it helps.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Removed that (i think) but no joy yet.??

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Make sure your HTML is valid before we start
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <head>
    
    <head>
    Two <<head> tags and not one HTML tag.

    No point trying to debug if the error is caused by validation . It's the first step in debugging
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apart from 4 errors on line 41 (<input type="hidden" name="Itemid" value=1 />) it all validates now, however, it wanted to me ato put back in the XML declaration and told me to remove the HTML tags I put in.

    For a bit of background info, this site is built in the Joomla CMS and I'm editing the index.php file in my template

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, could you stop updating the CSS with new stuff? Every refresh brings a new look upon the page .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oops, sorry

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's a bit awkward because of your setup. You'd need to rework the grayish background image to a differnet parent, b ut this CSS will patch the page up
    Code:
    #topmenu{overflow:hidden;/*contain the floats*/}
    #topmenu ul{width:auto;/*just remove the width here*/}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brill, yeah that's sorted it, thanks - was the width the main problem then?

    Any ideas what I could hang the background image on?

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Basically there wasn't enough room

    I see you got the background image problem sorted though
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for your help.

    The bacground image doesn't extend across the top fully in IE7, but I'll have a crack at solving that now.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Try specifing the width of the search/menu so that the total equates to the parents. Right now it's probably just luck it's appearing correct in FF (untested)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The problem is that when the ul gets haslayout it will steer clear of the floated search and not extend fully.

    You could remove haslayout by removing the width and height from the ul.

    e.g.

    Code:
    #topmenu {
        /*border:solid 1px;*/
        clear:both;
        padding-top:5px;
        background-image:url(http://www.hheadtc.myzen.co.uk/templates/holyhead_TC/images/shadow-width.png);
        background-repeat: repeat-y;
        font-size:17px;
        font-weight:normal;
        overflow:hidden;
        width:926px;
        margin:auto;
    }
    #topmenu ul {
        margin:0;
        padding:11px 0;
        /*border:solid 1px;*/
        list-style:none;
        background-image:url(http://www.hheadtc.myzen.co.uk/templates/holyhead_TC/images/top-menu-grey.png);
        background-repeat: repeat-x;
        }
    That will allow the menu to be full width but it's a rather fragile construction.

    Instead you should move the search form into the first list element and make the whole thing more robust.

    Code:
        <div id="topmenu">
                <div class="moduletable_menu">
                    <ul class="menu">
                        <li id="search">
                            <form action="index.php" method="post">
                                <div class="search">
                                    <input name="searchword" id="mod_search_searchword" maxlength="20" alt="Search" class="inputbox" type="text" size="16" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" />
                                    <input type="submit" value="Search" class="button" onclick="this.form.searchword.focus();"/>
                                </div>
                                <input type="hidden" name="task"   value="search" />
                                <input type="hidden" name="option" value="com_search" />
                                <input type="hidden" name="Itemid" value=1 />
                            </form>
                        </li>
                        <li id="current" class="active item1"><a href="http://www.hheadtc.myzen.co.uk/"><span>Home</span></a></li>
                        <li class="item3"><a href="/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=3"><span>About us</span></a></li>
    Code:
    #search {
        float:right;
        padding-top:0px;
        padding-right:40px;
    }

  14. #14
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, I think we're sorted now chaps - thanks again for that.

    One very small annoying this that's bugging me now - in the latest browsers (fine in IE7), the forum image (top of the right column) is 10-12px further down the page that the centre content or the left column. I can't for the life of me figure out why. It may even be something I've added into the code a few days ago and forgot.

    Any ideas?

    Latest css:

    Code:
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size:12px;
    	background-color:#ffffff;
    	background-image:url(../images/background-gradient.png);
    	background-repeat:repeat-x;
    }
    
    
    h2 {
    }
    h3 {
    font-size:1.1em;
    }
    
    
    #wrapper{
    	width:990px;
    	margin:auto;
    }
    
    #header{
    	background-image:url(../images/shadow-width.png);
    	background-repeat: repeat-y;
    }
    
    #header-top{
    	text-align:right;
    	height:43px;
    	background-image:url(../images/shadow-top.png);
    	background-repeat:no-repeat;
    	padding-right:32px;
    	padding-top:15px;
    	color:#FFFFFF;
    }
    
    #logo{
    	float:left;
    	height:281px;
    	width:307px;
    	background-image:url(../images/towncouncil-logo.gif);
    	background-repeat:no-repeat;
    	background-color:#FFFFFF;
    	margin-left:32px;
    }
    
    #header_graphic{
    	float:right;
    	height:281px;
    	width:619px;
    	margin-right:32px;
    }
    
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Top Menu xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    #search {
    	float:right;
    	padding-right:7px;
    	padding-top:7px;
    
    }
    
    #topmenu {
    	/*border:solid 1px;*/
    	clear:both;
    	margin:0px 32px 0px 32px;
    	background-image:url(../images/top-menu-grey.png);
    	background-repeat: repeat-x;
    	height:42px;
    	font-size:17px;
    	font-weight:normal;
    	overflow:hidden;
    	border-top:5px solid #FFFFFF;
    
    }
    
    
    #topmenu ul {
    	padding:11px 0px 13px 0px;
    	margin:auto;
    	list-style:none;
    	
    	}
    
    #topmenu li {
    	display:inline;
    }
    
    #topmenu li:hover {
    }
    
    #topmenu a {
    	/*border:solid 1px #000000;*/
    	text-decoration:none;
    	color:#FFFFFF;
    	background-image:url(../images/top-separater.gif);
    	background-repeat:no-repeat;
    	background-position:right;
    	font-size:16px;
    	padding:13px 13px 13px 13px;
    }
    
    #topmenu a:hover {
    	background-color: #D9B11E;
    	
    }
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Top Menu xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    
    #searchbox{
    	float:right;
    }
    
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx CONTENT xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    
    #content {
    	/*border:solid 1px #000000;*/
    	background-image:url(../images/shadow-width.png);
    	background-repeat:repeat-y;
    }
    
    #clearall {
    	clear:both;
    }
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx LEFT xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    
    #left {
    	float:left;
    	width:215px;
    	margin-left:15px;
    	margin-right:15px;
    	margin-top:10px;
    	margin-bottom:50px;
    	padding:0px;
    	padding-left:18px;
    	/*border:1px solid #000000;*/
    
    }
    
    #left h3{
    	color:#ffffff;
    	background-color:#7B199B;
    	padding:5px 5px 5px 11px;
    	margin:0;
    	margin-bottom:0px;
    	font-size:15px;
    	font-weight:normal;
    	font-style:normal;
    	vertical-align: middle;
    }
    
    #left .moduletable_orange h3{
    	background-color:#FF7F00;
    }
    
    #left .moduletable_red h3{
    	background-color:#BF0000;
    }
    
    #left ul{
    	padding:0;
    	margin:0;
    	margin-bottom:15px;
    	list-style-type:none;
    	background-color:#E5E5E5;
    }
    
    
    #left li{
    	display:block;
    	border-top: solid 1px #ffffff;
    }
    
    #left li:hover{
    	background-color:#D3D3D3;
    }
    
    #left .contentpaneopen {
    	padding-left:15px;
    	padding-right:15px;
    
    }
    
    #left a {
    	display:block;
    	text-decoration:none;
    	padding:7px 5px 7px 25px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight:normal;
    	font-size:13px;
    	background-image:url(../images/bullet.png);
    	background-repeat:no-repeat;
    	background-position:0;
    	color:#3F3F3F;
    	
    }
    
    #left a:link {
    
    }
    
    #left a:visited {
    }
    
    #left a:hover {
    
    }
    #left a:active {
    }
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Right xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    
    #right {
    	float:right;
    	width:215px;
    	margin-left:15px;
    	margin-right:15px;
    	margin-top:10px;
    	margin-bottom:50px;
    	padding:0px;
    	padding-right:18px;
    	/*border:1px solid #000000;*/
    
    }
    
    
    
    #right h3{
    	color:#ffffff;
    	background-color:#FF7F00;
    	padding:5px 5px 5px 11px;
    	margin:0;
    	margin-bottom:0px;
    	font-size:15px;
    	font-weight:normal;
    	font-style:normal;
    	vertical-align: middle;
    }
    
    #right .moduletable_poll h3{
    	background-color:#00A33D;
    }
    
    
    
    
    #right .moduletable_poll{
    	background-color:#E5E5E5;
    	font-size:13px;
    }
    
    #right .poll_poll{
    	padding-top:7px;
    }
    
    .moduletable {
    	padding:0px;
    	margin:0px;
    }
    
    #right ul{
    	padding:0;
    	margin:0;
    	margin-bottom:15px;
    	list-style-type:none;
    	background-color:#E5E5E5;
    }
    
    
    #right li{
    	display:block;
    	border-top: solid 1px #ffffff;
    }
    
    #right li:hover{
    	background-color:#D3D3D3;
    }
    
    #right .contentpaneopen {
    	padding-left:15px;
    	padding-right:15px;
    
    }
    
    #right a {
    	display:block;
    	text-decoration:none;
    	padding:7px 5px 7px 25px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight:normal;
    	font-size:13px;
    	background-image:url(../images/bullet.png);
    	background-repeat:no-repeat;
    	background-position:0;
    	color:#3F3F3F;	
    }
    
    #right a:link {
    
    }
    
    #right a:visited {
    }
    
    #right a:hover {
    
    }
    #right a:active {
    }
    
    /*#right .search {
    	margin-top:10px;
    	background-color: #999999;
    	padding:5px;
    }*/
    
    #right a.rightimage {
    	text-decoration:none;
    	padding:0px;
    	margin:0px;
    	background-image:none;
    	/*border:1px solid #000000;*/
    }
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Centre xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    
    #mainbody {
    	font-size:15px;
    	margin:0;
    	padding:0;
    	padding-top:8px;
    	color:#3F3F3F;
    	line-height:18px;
    	/*width:485px;*/
    	margin-left:263px;
    	margin-right:263px;
    	/*border:1px solid #000000;*/
    	}
    
    .contentheading {
    	color:#393491;
    	font-size:24px;
    	font-weight:normal;
    	padding-left:0px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	padding-bottom:15px;
    	line-height:24px;
    }
    
    #mainbody .componentheading{
    	color:#393491;
    	font-size:26px;
    	font-weight:normal;
    	padding-left:0px;
    	line-height:28px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	padding-bottom:5px;
    	border-bottom:1px solid #393491;
    	margin-bottom:15px;
    }
    
    #mainbody .contentpaneopen {
    	width:100%;
    }
    
    
    h1 {
    	font-weight: normal;
    	font-size:18px;
    	color:#393491;
    	/*background-color: #EAEAEA;*/
    	padding:4px 4px 4px 0px ;
    	border-bottom:1px solid #393491;
    }
    .home_title{
    	margin-top:0px;
    	background-color: #393491;
    	padding:5px 10px 5px 10px;
    	font-size:18px;
    	color:#FFFFFF;
    	margin-bottom:5px;
    }
    .home_text{
    	background-color:#E2E2F2;
    	padding:5px 10px 5px 10px;
    }
    
    .small {
    	font-size:11px;
    	color:#999999;
    	line-height:12px;
    }
    
    .createdate {
    	line-height:12px;
    	font-size:11px;
    	color:#999999;
    }
    
    #mainbody img{
    	padding:5px;
    	margin:5px 15px 5px 5px ;
    	border:1px solid #999999;
    }
    
    #mainbody  img.noborder{
    	border:none;
    	padding:0px;
    	margin:0px; 
    
    }
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Polls xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    #mainbody .pollstableborder{
    	
    		/*width:450px;
    	border:1px solid #000000;*/
    }
    
    #mainbody .pollstableborder img{
    	border:none;
    	}
    
    #mainbody .smalldark{
    	width:100px;
    	padding-left:15px;
    	font-size:12px;
    /*	border:1px solid #000000;*/
    }
    
    #mainbody .sectiontableentry1{
    	text-align:center;
    	background-color: #E4E4E4;
    }
    
    #mainbody .sectiontableentry0{
    	text-align:center;
    	background-color: #EFEFEF;
    }
    
    
    /* xxxxxxxxxxxxxxx Poll Module xxxxxxxxxxxxxxxxxxxxx */
    #right .pollstableborder_poll {
    	width:100%;
    
    }
    #right .sectiontableentry1_poll {
    	padding:3px;
    }
    #right .sectiontableentry2_poll {
    	padding:3px;
    }
    
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Footer Menu xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    
    #footer .moduletable_footer_info{
    	color:#8C8C8C;
    }
    
    #footer{
    	text-align:center;
    	clear:both;
    	background-image:url(../images/shadow-width-grey.png);
    	background-repeat: repeat-y;
    	margin:0px;
    }
    
    
    #footer ul {
    	padding:0px;
    	padding-top:11px;
    	margin:auto;
    	height:42px;
    	/*border:solid 1px;*/
    	width:926px;
    	list-style:none;
    	}
    
    #footer li {
    	display:inline;
    }
    
    #footer li:hover {
    }
    
    
    #footer a {
    	text-decoration:none;
    	color:#666666;
    	border-right:1px solid #666666;
    	padding:0px 10px 0px 10px;
    	
    }
    
    #footer a:link {
    	
    }
    
    #footer a:visited {
    	
    }
    
    #footer a:hover {
    		color: #333333;
    
    }
    #footer a:active {
    	
    }
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Footer Info xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    
    #footer .moduletable_footer_info{
    	color:#8C8C8C;
    }
    
    #footer .moduletable_footer_info a {
    	text-decoration:none;
    	color:#8C8C8C;
    	border:none;
    	padding:0px;
    	
    }
    
    #footer .moduletable_footer_info a:hover {
    	color:#333333;
    }
    
    
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Credits xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    #credits{
    	background-image:url(../images/shadow-bottom-grey.png);
    	background-repeat: no-repeat;
    	margin:0px;
    	height:50px;
    	padding-top:30px;
    	color:#999999;
    	font-size:10px;
    }
    
    
    
    
    
    
    
    
    a:link {
    }
    a:visited {
    }
    a:hover {
    }
    a:active {
    }
    
    a:link img {
    	border:none;
    	padding:0px;
    	margin:0px;
    }

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, IE7 is displaying correctly because margin collapse doesn't happen on haslayout elements, aka "#right".

    The <p>'s margin inside #right is causing it to display the image down. Set the <p>'s margins to 0
    Code:
    #right p{margin:0;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #16
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd never have found that - thanks!!

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad to help . You're welcome.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •