SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Wrap Problem

  1. #1
    Village Idiot cgustaveson's Avatar
    Join Date
    May 2008
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wrap Problem

    http://www.munciediscgolf.com/index.php

    For some reason in IE the text wraps around the images on the front page when it should only do that in the article view, it works fin in FF, opera, and safari.
    Smoke Lounge | Hookah Store and Community
    Shisha Tobacco
    SitePoint Users get 5% off use promo code s1t35p

  2. #2
    SitePoint Addict dbr's Avatar
    Join Date
    Aug 2006
    Location
    Tucked away in the mountains...
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have 21 validation errors, I'd fix those first and then see if the problem still exists.
    "Three components make an entrepreneur:
    the person, the idea, and the resources to make it happen."
    Anita Roddick ~British entrepreneur
    dbr founder of: ProximityCast.com

  3. #3
    Village Idiot cgustaveson's Avatar
    Join Date
    May 2008
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The CSS validates, I am not coming here with an HTML error.
    Smoke Lounge | Hookah Store and Community
    Shisha Tobacco
    SitePoint Users get 5% off use promo code s1t35p

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi, Its the same answer I just gave in another thread and you are using the deprecated (in strict doctypes) align attribute in the image tag.

    Code:
    <p><img src="/images/stories/hole-1.jpg" border="0" alt="Hole 1 at McCulloch" hspace="10" vspace="10" width="200" height="150" align="left" /></p>
    That has the same effect as floating and will cause text to wrap around it. You should be using css and not those deprecated elements anyway.

    These should be removed and css used instead.

    Code:
    <p><img src="/images/stories/hole-1.jpg" border="0" alt="Hole 1 at McCulloch" hspace="10" vspace="10" width="200" height="150" align="left" /></p>
    Hope that helps

  5. #5
    Village Idiot cgustaveson's Avatar
    Join Date
    May 2008
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So it doesn't validate but if I change it to a transitional doc type it's not all the sudden going to work is it?
    Smoke Lounge | Hookah Store and Community
    Shisha Tobacco
    SitePoint Users get 5% off use promo code s1t35p

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    So it doesn't validate but if I change it to a transitional doc type it's not all the sudden going to work is it?
    You are using transitional already and it will validate in transitional. I was merely pointing out that it was deprecated in strict and its not a good idea to use presentational attributes at all whatever the doctype

    Transitional allows some deprecated elements which is why its called transitional but it doesn't make it good practice even if it validates.

    I have given the answer anyway and you just need to remove the align="left" attribute fromm the image and things should be ok

  7. #7
    Village Idiot cgustaveson's Avatar
    Join Date
    May 2008
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I am using Joomla and I did but it wasn't working right still. When I did this it didn't even put the align attribute in the img tags.

    PHP Code:
    <?php
    /**
     * @copyright    Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
     * @license        GNU/GPL, see LICENSE.php
     * Joomla! is free software. This version may have been modified pursuant
     * to the GNU General Public License, and as distributed it includes or
     * is derivative of works licensed under the GNU General Public License or
     * other free or open source software licenses.
     * See COPYRIGHT.php for copyright notices and details.
     */

    // no direct access
    defined'_JEXEC' ) or die( 'Restricted access' );
    ?>
    <!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="<?php echo $this->language?>" lang="<?php echo $this->language?>" >
    <head>
    <jdoc:include type="head" />

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/template.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/<?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/<?php echo $this->params->get('backgroundVariation'); ?>_bg.css" type="text/css" />
    <!--[if lte IE 6]>
    <link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ieonly.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <?php if($this->direction == 'rtl') : ?>
        <link href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/template_rtl.css" rel="stylesheet" type="text/css" />
    <?php endif; ?>

    </head>
    <body id="page_bg" class="color_<?php echo $this->params->get('colorVariation'); ?> bg_<?php echo $this->params->get('backgroundVariation'); ?> width_<?php echo $this->params->get('widthStyle'); ?>">
    <a name="up" id="up"></a>
    <div class="center" align="center">
        <div id="wrapper">
            <div id="wrapper_r">
                <div id="header">
                    <div id="header_l">
                        <div id="header_r">
                            <div id="logo"></div>
                            <jdoc:include type="modules" name="top" />
                        </div>
                    </div>
                </div>

                <div id="tabarea">
                    <div id="tabarea_l">
                        <div id="tabarea_r">
                            <div id="tabmenu">
                            <table cellpadding="0" cellspacing="0" class="pill">
                                <tr>
                                    <td class="pill_l">&nbsp;</td>
                                    <td class="pill_m">
                                    <div id="pillmenu">
                                        <jdoc:include type="modules" name="user3" />
                                    </div>
                                    </td>
                                    <td class="pill_r">&nbsp;</td>
                                </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="search">
                    <jdoc:include type="modules" name="user4" />
                </div>

                <div id="pathway">
                    <jdoc:include type="modules" name="breadcrumb" />
                </div>

                <div class="clr"></div>

                <div id="whitebox">
                    <div id="whitebox_t">
                        <div id="whitebox_tl">
                            <div id="whitebox_tr"></div>
                        </div>
                    </div>

                    <div id="whitebox_m">
                        <div id="area">
                                        <jdoc:include type="message" />

                            <div id="leftcolumn">
                            <?php if($this->countModules('left')) : ?>
                                <jdoc:include type="modules" name="left" style="rounded" />
                            <?php endif; ?>
                            </div>

                            <?php if($this->countModules('left')) : ?>
                            <div id="maincolumn">
                            <?php else: ?>
                            <div id="maincolumn_full">
                            <?php endif; ?>
                                <?php if($this->countModules('user1 or user2')) : ?>
                                    <table class="nopad user1user2">
                                        <tr valign="top">
                                            <?php if($this->countModules('user1')) : ?>
                                                <td>
                                                    <jdoc:include type="modules" name="user1" style="xhtml" />
                                                </td>
                                            <?php endif; ?>
                                            <?php if($this->countModules('user1 and user2')) : ?>
                                                <td class="greyline">&nbsp;</td>
                                            <?php endif; ?>
                                            <?php if($this->countModules('user2')) : ?>
                                                <td>
                                                    <jdoc:include type="modules" name="user2" style="xhtml" />
                                                </td>
                                            <?php endif; ?>
                                        </tr>
                                    </table>

                                    <div id="maindivider"></div>
                                <?php endif; ?>

                                <table class="nopad">
                                    <tr valign="top">
                                        <td width="468">
                                            <jdoc:include type="component" />
                                            <jdoc:include type="modules" name="footer" style="xhtml"/>
                                        </td>
                                        <?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
                                            

                                            <td class="greyline">&nbsp;</td>
                                            <td width="170">
                                                <jdoc:include type="modules" name="right" style="xhtml"/>
                                            </td>
                                        <?php endif; ?>
                                    </tr>
                                </table>

                            </div>
                            <div class="clr"></div>
                        </div>
                        <div class="clr"></div>
                    </div>

                    <div id="whitebox_b">
                        <div id="whitebox_bl">
                            <div id="whitebox_br"></div>
                        </div>
                    </div>
                </div>

                <div id="footerspacer"></div>
            </div>

            <div id="footer">
                <div id="footer_l">
                    <div id="footer_r">
                        <p id="syndicate">
                            <jdoc:include type="modules" name="syndicate" />
                        </p>
                        <p id="power_by">
                              <?php echo JText::_('Powered by'?> <a href="http://www.joomla.org">Joomla!</a>.
                            <?php echo JText::_('Valid'?> <a href="http://validator.w3.org/check/referer">XHTML</a> <?php echo JText::_('and'?> <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <jdoc:include type="modules" name="debug" />

    </body>
    </html>
    Here is the CSS:
    Code:
    /*****************************/
    /*** Core html setup stuff ***/
    /*****************************/
    
    html {
      height: 100%;
      margin-bottom: 1px;
    }
    
    form {
      margin: 0;
      padding: 0;
    }
    
    body {
    	font-family: Helvetica,Arial,sans-serif;
    	line-height: 1.3em;
    	margin: 0px 0px 0px 0px;
    	font-size: 12px;
    	color: #333;
    }
    
    a:link, a:visited {
    	text-decoration: none;
    	font-weight: normal;
    }
    
    a:hover {
    	text-decoration: underline;
    	font-weight: normal;
    }
    
    input.button { cursor: pointer; }
    
    p { margin-top: 0; margin-bottom: 5px; }
    
    img { border: 0 none; 
    }
    
    /*****************************************/
    /*** Template specific layout elements ***/
    /*****************************************/
    #page_bg {
    	padding: 10px 0;
    	margin-bottom: 1px;
    }
    
    div.center {
      text-align: center;
    }
    
    div#wrapper {
    	margin-left: auto;
    	margin-right: auto;
    }
    
    body.width_medium div#wrapper {
    	width: 950px;
    }
    
    body.width_small div#wrapper {
    	width: 773px;
    }
    
    body.width_fmax div#wrapper {
    	min-width: 750px;
    	max-width: 1050px;
    }
    
    div#header_l {
    	position: relative;
    }
    
    div#header_r {
    	height: 90px;
    	padding-left: 370px;
    	padding-right: 30px;
    	padding-top: 25px;
    	overflow: hidden;
    	text-align: left;
    }
    
    div#logo {
    	position: absolute;
    	left: 0;
    	top: 0;
    	float: left;
    	width: 298px;
    	height: 75px;
    	background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
    	margin-left: 30px;
    	margin-top: 25px;
    }
    
    div#newsflash {
    	width: auto;
    	margin-left: 350px;
    	margin-right: 30px;
    	border: 1px solid #00f;
    }
    
    div#tabarea {
    	background: #f7f7f7 url(../images/mw_header_b.png) 0 0 repeat-x;
    	margin: 0 11px;
    
    }
    
    div#tabarea_l {
    	background: url(../images/mw_header_l_b.png) 0 0 no-repeat;
    	padding-left: 32px;
    }
    
    div#tabarea_r {
    	height: 42px;
    	background: url(../images/mw_header_r_b.png) 100% 0 no-repeat;
    	padding-right: 1px;
    }
    
    div#footer_r {
    	padding-top: 10px;
    	height: 47px;
    	overflow: hidden;
    }
    
    div#footer_r div {
    	text-align: center;
    	font-size: .90em;
    	color: #aaa;
    }
    
    div#footer_r a:link, div#footer_r a:visited  {
    	color: #999;
    }
    
    div#footerspacer {
    	height: 10px;
    }
    
    #pathway {
    	padding: 0px 10px 8px;
    	width: auto;
    	margin-top: -2px;
    	margin-right: 250px;
    	text-align: left;
    }
    
    #search {
    	float: right;
    	width:320px;
    	margin-top: -20px;
    	margin-right: 30px;
    	height: 40px;
    	overflow: hidden;
    	text-align:right;
    }
    
    form#searchForm input {
    	vertical-align: middle;
    }
    
    form#searchForm table {
    	border-collapse: collapse;
    }
    
    form#searchForm td {
    	padding:0;
    }
    
    #mod_search_searchword {
    	padding-left: 3px;
    }
    
    #area {
    	padding: 0;
    }
    
    #whitebox {
    	margin: 0 21px 0px 21px;
    	background: #fff;
    	width: 900px;
    }
    
    #whitebox div {
    	text-align: left;
    }
    
    #whitebox_t {
    	background: #fff url(../images/mw_content_t.png) 0 0 repeat-x;
    }
    
    #whitebox_tl {
    	background: url(../images/mw_content_t_l.png) 0 0 no-repeat;
    }
    
    #whitebox_tr {
    	height: 10px;
    	overflow: hidden;
    	background: url(../images/mw_content_t_r.png) 100% 0 no-repeat;
    }
    
    #whitebox_m {
    	border-left: 1px solid #ccc;
    	border-right: 1px solid #ccc;
    	width: auto;
    	padding: 1px 8px;
    }
    
    #whitebox_b {
    	margin-top: -5px;
    	background: url(../images/mw_content_b.png) 0 100% repeat-x;
    }
    
    #whitebox_bl {
    	background: url(../images/mw_content_b_l.png) 0 100% no-repeat;
    }
    
    #whitebox_br {
    	height: 13px;
    	background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
    }
    
    /* horizontal pill menu */
    table.pill {
      margin-left: auto;
      margin-right: auto;
      padding: 0;
    }
    
    td.pill_l {
      background: url(../images/mw_menu_cap_l.png) no-repeat;
      width:  20px;
      height: 32px;
    
    }
    
    td.pill_m {
      background: url(../images/mw_menu_normal_bg.png) repeat-x;
      padding: 0;
      margin: 0;
      width: auto;
    }
    
    td.pill_r {
      background: url(../images/mw_menu_cap_r.png) no-repeat;
      width:  19px;
      height: 32px;
    }
    
    #pillmenu {
      white-space: nowrap;
      height: 32px;
      float: left;
    }
    
    #pillmenu ul {
      margin: 0;
      padding: 0;
      list-style:none;
    }
    
    #pillmenu li {
    	float: left;
    	background: url(../images/mw_menu_separator.png) top right no-repeat;
    	margin: 0;
    	padding: 0;
    }
    
    #pillmenu a {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
    	float:left;
      display:block;
      height: 24px;
      line-height: 24px;
      padding: 0 20px;
      color: #000;
      text-decoration: none;
    }
    
    #pillmenu a#active_menu-nav {
    	margin-top:2px;
    	height: 21px;
    	line-height: 21px;
    	background-position: 0 0;
    }
    
    #leftcolumn {
    	padding: 0;
    	margin: 0;
    	width: 20%;
    	float:left;
    }
    
    #maincolumn,
    
    #maincolumn_full {
    	margin-left: 20%;
    	padding-left: 15px;
    	width: 75%;
    }
    
    #maincolumn_full {
    	margin-left: 0;
    	padding: 0;	
    	width: 100%;
    }
    
    table.nopad {
    	width: 100%;
    	border-collapse: collapse;
    	padding: 0;
    	margin: 0;
    	margin-bottom: 15px;
    }
    
    table.nopad td.middle_pad {
    	width: 20px;
    }
    
    /*****************************************/
    /*** Joomla! specific content elements ***/
    /*****************************************/
    
    div.offline {
    	background: #fffebb;
    	width: 100%;
    	position: absolute;
    	top: 0;
    	left: 0;
    	font-size: 1.2em;
    	padding: 5px;
    }
    
    span.pathway {
      display: block;
      margin: 0 20px;
      height: 16px;
      line-height: 16px;
      overflow: hidden;
    }
    
    /* headers */
    div.componentheading {
      padding-left: 0px;
    }
    
    h1 {
    	padding: 0;
    	font-family:Helvetica ,Arial,sans-serif;
    	font-size: 1.3em;
    	font-weight: bold;
    	vertical-align: bottom;
    	color: #666;
    	text-align: left;
    	width: 100%;
    }
    
    h2, .contentheading {
    	padding: 0;
    	font-family: Arial, Helvetica,sans-serif;
    	font-size: 1.4em;
    	font-weight: normal;
    	vertical-align: bottom;
    	color: #333;
    	text-align: left;
    	width: 100%;
    }
    
    table.contentpaneopen h3 {
    	margin-top: 25px;
    }
    
    h4 {
    	font-family: Arial, Helvetica, sans-serif;
    	color: #333;
    }
    
    h3, .componentheading, table.moduletable th, legend {
      margin: 0;
      font-weight: bold;
      font-family: Helvetica,Arial,sans-serif;
      font-size: 1.5em;
      padding-left: 0px;
    	margin-bottom: 10px;
    	text-align: left;
    }
    
    /* small text */
    .small {
    	font-size: .90em;
    	color: #999;
    	font-weight: normal;
    	text-align: left;
    }
    
    .modifydate {
      height: 20px;
      vertical-align: bottom;
    	font-size: .90em;
    	color: #999;
    	font-weight: normal;
    	text-align: left;
    }
    
    .createdate {
    	height: 20px;
    	vertical-align: top;
    	font-size: .90em;
    	color: #999;
    	font-weight: normal;
    	vertical-align: top;
    	padding-bottom: 5px;
    	padding-top: 0px;
    
    }
    
    a.readon {
    	margin-top: 10px;
    	display: block;
    	float: left;
    	background: url(../images/mw_readon.png) top right no-repeat;
    	padding-right: 20px;
    	line-height: 14px;
    	height: 16px;
    }
    
    /* form validation */
    .invalid { border-color: #ff0000; }
    label.invalid { color: #ff0000; }
    
    
    /** overlib **/
    
    .ol-foreground {
    	background-color: #f6f6f6;
    }
    
    .ol-background {
    	background-color: #666;
    }
    
    .ol-textfont {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    }
    
    .ol-captionfont {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #f6f6f6;
    	font-weight: bold;
    }
    .ol-captionfont a {
    	color: #0B55C4;
    	text-decoration: none;
    	font-size: 12px;
    }
    
    .ol-closefont {}
    
    /* menu links */
    a.mainlevel:link, a.mainlevel:visited {
    	padding-left: 5px;
    }
    
    a.mainlevel:hover {
    
    }
    
    /* spacers */
    span.article_separator {
    	display: block;
    	height: 20px;
    }
    
    .article_column {
    	padding-right: 5px;
    }
    
    .column_separator {
    	border-left: 1px dashed #e0e0e0;
    	padding-left: 10px;
    }
    
    td.buttonheading {
    
    }
    
    td.buttonheading img {
    	border:none;
    }
    
    .clr {
    	clear: both;
    }
    
    td.greyline {
      width: 20px;
      background: url(../images/mw_line_grey.png) 50% 0 repeat-y;
    }
    
    div#maindivider {
      border-top: 1px solid #ddd;
      margin-bottom: 10px;
      overflow: hidden;
      height: 1px;
    }
    
    table.blog span.article_separator {
    	display: block;
    	height: 20px;
    }
    
    /* edit button */
    .contentpaneopen_edit{
    	float: left;
    }
    
    /* table of contents */
    table.contenttoc {
      margin: 5px;
      border: 1px solid #ccc;
      padding: 5px;
    }
    
    table.contenttoc td {
      padding: 0 5px;
    }
    
    
    /* content tables */
    td.sectiontableheader {
      background: #efefef;
      color: #333;
      font-weight: bold;
      padding: 4px;
      border-right: 1px solid #fff;
    }
    
    tr.sectiontableentry0 td,
    tr.sectiontableentry1 td,
    tr.sectiontableentry2 td {
      padding: 4px;
    }
    
    td.sectiontableentry0,
    td.sectiontableentry1,
    td.sectiontableentry2 {
      padding: 3px;
    }
    
    
    /* content styles */
    table.contentpaneopen, table.contentpane {
    	margin: 0;
    	padding: 0;
    	width: 468;
    }
    
    table.contentpaneopen li {
    	margin-bottom: 5px;
    }
    
    table.contentpaneopen fieldset {
    	border: 0;
    	border-top: 1px solid #ddd;
    }
    
    table.contentpaneopen h3 {
    	margin-top: 25px;
    }
    
    table.contentpaneopen h4 {
    	font-family: Arial, Helvetica, sans-serif;
    	color: #333;
    }
    
    .highlight {
    	background-color: #fffebb;
    }
    
    /* module control elements */
    table.user1user2 div.moduletable {
    	margin-bottom: 0px;
    }
    
    div.moduletable, div.module {
      margin-bottom: 25px;
    }
    
    div.module_menu h3 {
    	font-family: Helvetica, Arial, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #eee;
    	margin: -23px -4px 5px -5px;
    	padding-left: 10px;
    	padding-bottom: 2px;
    }
    
    div.module_menu {
    	margin: 0;
    	padding: 0;
    	margin-bottom: 15px;
    }
    
    div.module_menu div div div {
    	padding: 10px;
    	padding-top: 30px;
    	padding-bottom: 15px;
    	width: auto;
    }
    
    div.module_menu div div div div {
    	background: none;
    	padding: 0;
    }
    
    div.module_menu ul {
    	margin: 10px 0;
    	padding-left: 20px;
    }
    
    div.module_menu ul li a:link, div.module_menu ul li a:visited {
    	font-weight: bold;
    }
    
    #leftcolumn div.module {
    	padding: 0 10px;
    }
    
    #leftcolumn div.module table {
    	width: auto;
    }
    
    /* forms */
    table.adminform textarea {
      width: 540px;
      height: 400px;
      font-size: 1em;
      color: #000099;
    }
    
    div.search input {
    	width: 145px;
    	border: 1px solid #ccc;
    	margin: 15px 0 10px 0;
    }
    
    form#form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
    form#form-login ul { padding-left: 20px; }
    
    form#com-form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
    form#com-form-login ul { padding-left: 20px; }
    
    /* thumbnails */
    div.mosimage         {  margin: 5px; }
    div.mosimage_caption {  font-size: .90em; color: #666; }
    
    div.caption       { padding: 0 10px 0 10px; }
    div.caption img   { border: 1px solid #CCC; }
    div.caption p     { font-size: .90em; color: #666; text-align: center; }
    
    /* Parameter Table */
    table.paramlist {
    	margin-top: 5px;
    }
    
    table.paramlist td.paramlist_key {
    	width: 128px;
    	text-align: left;
    	height: 30px;
    }
    
    table.paramlist td.paramlist_value {
    }
    
    div.message {
    	font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	font-size : 14px;
    	color : #c30;
    	text-align: center;
    	width: auto;
    	background-color: #f9f9f9;
    	border: solid 1px #d5d5d5;
    	margin: 3px 0px 10px;
    	padding: 3px 20px;
    }
    
    /* Banners module */
    
    /* Default skyscraper style */
    .bannergroup {
    }
    
    .banneritem img {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    /* Text advert style */
    
    .banneritem_text {
    	padding: 4px;
    	font-size: 11px;
    }
    
    .bannerfooter_text {
    	padding: 4px;
    	font-size: 11px;
    	background-color: #F7F7F7;
    	text-align: right;
    }
    
    /* System Messages */
    /* see system general.css */
    
    .pagination span { padding: 2px; }
    .pagination a    { padding: 2px; }
    
    /* Polls */
    .pollstableborder td {
    	text-align: left;
    }
    
    /* WebLinks */
    span.description {
    	display:block;
    	padding-left: 30px;
    }
    
    /* Frontend Editing*/
    fieldset {
    	border: 1px solid #ccc;
    	margin-top: 15px;
    	padding: 15px;
    }
    
    legend {
    	margin: 0;
    	padding: 0 10px;
    }
    
    td.key {
    	border-bottom:1px solid #eee;
    	color: #666;
    }
    
    /* Tooltips */
    
    .tool-tip {
    	float: left;
    	background: #ffc;
    	border: 1px solid #D4D5AA;
    	padding: 5px;
    	max-width: 200px;
    }
    
    .tool-title {
    	padding: 0;
    	margin: 0;
    	font-size: 100%;
    	font-weight: bold;
    	margin-top: -15px;
    	padding-top: 15px;
    	padding-bottom: 5px;
    	background: url(../../system/images/selector-arrow.png) no-repeat;
    }
    
    .tool-text {
    	font-size: 100%;
    	margin: 0;
    }
    
    /* System Standard Messages */
    #system-message { margin-bottom: 20px; }
    
    #system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;}
    
    /* System Error Messages */
    #system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}
    
    /* System Notice Messages */
    #system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E; margin:0px; padding-left: 40px; text-indent:0px;}
    
    #syndicate{
    	float:left;
    	padding-left: 25px;
    }
    
    #power_by{
    	float:right;
    	padding-right: 25px;
    }
    
    /* Component Specific Fixes */
    
    #component-contact table td {
    	padding: 2px 0;
    }
    Smoke Lounge | Hookah Store and Community
    Shisha Tobacco
    SitePoint Users get 5% off use promo code s1t35p

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

    In this page you have 2 attributes with align="left" right here:

    Code:
        <p><img src="http://www.munciediscgolf.com/images/stories/hole-1.jpg" border="0" alt="Hole 1 at McCulloch" hspace="10" vspace="10" width="200" height="150" align="left" /></p>
    
    .....
    
                                                                                <img src="http://www.munciediscgolf.com/images/stories/pre-open.jpg" border="0" alt="Future Home of Disc Golf Course" hspace="10" vspace="10" width="200" height="150" align="left" />Johnny Godfrey said
    If you remove those attributes it will fix the issue you asked about in post #1.
    For some reason in IE the text wraps around the images on the front page
    That will stop the text wrapping alongside the image but text will start level with the image if there is room because images are inline elements by default and are treated like text. Therefore you should also set those images to display:block.

    e.g.

    Code:
    .contentpaneopen img{display:block}
    I have copied your html and source file locally and tested and it does indeed fix the problem.

    If you are not getting the same result then please update the code with my fixes so that I can see what's going on in your live version

  9. #9
    Village Idiot cgustaveson's Avatar
    Join Date
    May 2008
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    In this page you have 2 attributes with align="left" right here:

    Code:
        <p><img src="http://www.munciediscgolf.com/images/stories/hole-1.jpg" border="0" alt="Hole 1 at McCulloch" hspace="10" vspace="10" width="200" height="150" align="left" /></p>
    
    .....
    
                                                                                <img src="http://www.munciediscgolf.com/images/stories/pre-open.jpg" border="0" alt="Future Home of Disc Golf Course" hspace="10" vspace="10" width="200" height="150" align="left" />Johnny Godfrey said
    If you remove those attributes it will fix the issue you asked about in post #1.


    That will stop the text wrapping alongside the image but text will start level with the image if there is room because images are inline elements by default and are treated like text. Therefore you should also set those images to display:block.

    e.g.

    Code:
    .contentpaneopen img{display:block}
    I have copied your html and source file locally and tested and it does indeed fix the problem.

    If you are not getting the same result then please update the code with my fixes so that I can see what's going on in your live version
    I don't know how to get it not to add it since it is an application
    Smoke Lounge | Hookah Store and Community
    Shisha Tobacco
    SitePoint Users get 5% off use promo code s1t35p


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
  •