Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Member
    Join Date
    Feb 2009
    Posts
    54
    Member #
    18241
    Could you please help. I am somewhat stuck and confused with some CSS design issues.

    I have a "nested div" inside a container. Somehow my nested div is not working properly.

    On my website the code seems to work well in Firefox but goes completely bananas in IE.


    What can I do to fix the problem?? Please Help. The website url is www.professionalwebsitesolutions.com

    Here is the code

    First the HTML

    CODE
    HTML 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>Goodluck Nairaman </title>
        
      <style type="text/css">
    <!--
    .style16 {color: #FF0000}
    -->
     
    <!--
    .style18 {font-size: large}
    .style20 {font-size: 18px}
    .style22 {font-size: medium}
    -->
      </style>
      <link href="style.css" rel="stylesheet" type="text/css" />
      <style type="text/css">
    <!--
    .style23 {color: #0000FF}
    -->
      </style>
    </head>
    <body>
      
    <div id="content">
    &nbsp;
    <p align="center">
    <span class="style16 style18"> "Please Help Me Fix the Problem 
    
    in Internet Explorer "</span>
    <p align="center">The page works well in Firefox. But in 
    
    Internet Explorer it spills out at the bottom. <p 
    
    align="center"><A 
    
    HREF=http://www.businessguidenigeria.com/a9qe3pt2m/7ln5o0n/k1n4e
    
    /lucky.pdf></A>
    <p align="center">
    <p align="center"><img src="ebook.gif" width="263" height="340" 
    
    align="left" />Please help  <span class="style16 style20 
    
    style23">“What Can I do?This page doesnt work in IE  ”</span>
    <p align="center">I would like box below to be centered and to 
    
    have some sort of equal  margins at the sides.
    
    <p align="center">Also I would like there to be a small margin 
    
    at  the bottom of the page. The page seems to work well in 
    
    Firefox.
    <p align="center"> But when  I try to open it in IE the contents 
    
    spill out at the bottom and also  the whole box(the div&quot; 
    
    shifts to one side.
    <p align="center">
    <p align="center">What can I do to center the  div. I want all 
    
    this pictures to be as they are. Please help
    <p align="center"><span class="style20 style23">&ldquo;What Can 
    
    I do?This page doesnt work in IE  &rdquo;</span>
    <p align="center">I would like box below to be centered and to 
    
    have some sort of equal  margins at the sides. Also I would like 
    
    there to be a small margin at  the bottom of the page. The page 
    
    seems to work well in Firefox but when  I try to open it in IE 
    
    the contents spill out at the bottom and also  the whole box(the 
    
    div&quot; shifts to one side. What can I do to center the  div. 
    
    I want all this pictures to be as they are.
    <p align="center">Please help <span class="style20 
    
    style23">&ldquo;What Can I do?This page doesnt work in IE  
    
    &rdquo;</span>
    <p align="center">I would like box below to be centered and to 
    
    have some sort of equal  margins at the sides. Also I would like 
    
    there to be a small margin at  the bottom of the page. The page 
    
    seems to work well in Firefox but when  I try to open it in IE 
    
    the contents spill out at the bottom and also  the whole 
    
    box(&quot;the div&quot; )shifts to one side .
    
    <p align="center">What can I do to center the  div. I want all 
    
    the pictures to be as they are.<br />
      
    <div id="inside_box"><p class="style16 style22">
        <h2>Please help me to center this &quot;div&quot; properly. 
    
    </h2>
        </p>
      <p>&nbsp;</p>
      <p>I would like this div to be centered and to have some sort 
    
    of equal margins at the sides. Also I would like there to be a 
    
    small margin at the bottom of the page. The page seems to work 
    
    well in Firefox but when I try to open it in IE the contents 
    
    spill out at the bottom and also the whole box(the div&quot; 
    
    shifts to one side. What can I do to center the div. I want all 
    
    this pictures to be as they are. </p>
      <p><img src="fred14.jpg" width="150" height="140" align="left" 
    
    />Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    
    Pellentesque  vitae enim a nulla aliquet sollicitudin. 
    
    Pellentesque lorem lacus,  mollis in, gravida consequat, 
    
    volutpat vitae, arcu. In sollicitudin  consequat justo. Morbi 
    
    volutpat, nibh ornare elementum faucibus, nunc  purus aliquet 
    
    diam, eu adipiscing magna ligula ut elit. Vivamus  volutpat 
    
    volutpat ante. Proin non tellus sed magna vestibulum ornare.  
    
    Nullam vel lectus. Nam non mi. Praesent sit amet ipsum. In hac  
    
    habitasse platea dictumst. Integer ligula risus, tincidunt sit 
    
    amet,  imperdiet nec, interdum a, tortor. Nunc ac purus. <img 
    
    src="gen.jpg" width="108" height="124" align="left" /><img 
    
    src="Jeta.jpg" width="204" height="252" align="right" /></p>
      <p>&nbsp;</p>
      <p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing 
    
    elit. Pellentesque  vitae enim a nulla aliquet sollicitudin. 
    
    Pellentesque lorem lacus,  mollis in, gravida consequat, 
    
    volutpat vitae, arcu. In sollicitudin  consequat justo. Morbi 
    
    volutpat, nibh ornare elementum faucibus, nunc  purus aliquet 
    
    diam, eu adipiscing magna ligula ut elit. Vivamus  volutpat 
    
    volutpat ante. Proin non tellus sed magna vestibulum ornare.  
    
    Nullam vel lectus. Nam non mi. Praesent sit amet ipsum. In hac  
    
    habitasse platea dictumst. Integer ligula risus, tincidunt sit 
    
    amet,  imperdiet nec, interdum a, tortor. Nunc ac purus. 
    
    &quot;<img src="rmd1.jpg" width="118" height="126" align="left" 
    
    /> </strong> </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    
    Pellentesque  vitae enim a nulla aliquet sollicitudin. 
    
    Pellentesque lorem lacus,  mollis in, gravida consequat, 
    
    volutpat vitae, arcu. Please help  </p>
      <p>&nbsp;</p>
      <p><span class="style20 style23">&ldquo;What Can I do?This 
    
    page doesnt work in IE  &rdquo;</span>Lorem ipsum dolor sit 
    
    amet, consectetur adipiscing elit. Pellentesque  vitae enim a 
    
    nulla aliquet sollicitudin. Pellentesque lorem lacus,  mollis 
    
    in, gravida consequat, volutpat vitae, arcu. non tellus sed 
    
    magna vestibulum ornare.  Nullam vel lectus. Nam non mi. 
    
    Praesent sit amet ipsum. In hac  habitasse platea dictumst. 
    
    Integer ligula risus, tincidunt sit amet,  imperdiet nec, 
    
    interdum a, tortor. Nunc ac purus. </p>
    </div>
    </div>
    </center>
    
    
      <p>&nbsp;</p>
    </div>
    <p>&nbsp;</p>
    </body>
    </html>
    next the CSS

    CODE
    Code:
    /* CSS Document */
    body {
        background-color: #00FF00;
        background-image: url(img/.gif);
        background-position: left;
        background-repeat:repeat;
        background-attachment: inherit;
        float: none;
        height: auto;
        width: 650px;
    }
    
    h1
    {
        color:#FF0000;
        background-color:#FFFFFF;
        position: relative;
    }
    
    h2
    {
        color:#FF0000;
        font-weight: 600;
    }
    #content{
        width:700px;
        border: inset;
        border-color: #0000FF;
        border-width:10px;
        position: absolute;
        left: 217px;
        top: 17px;
        background-color: #FFFFFF;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #000000;
        font-weight: normal;
    
    }
    p {
    font-family: Verdana;
    font-style : normal;
    font-size : 10pt;
    font-weight :600;
    text-align : left;
    text-indent : 1em;
    color: #000000;
    margin: 0 20px 10px 20px }
    }
    /*img {
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    }*/
    .imgborder {
    }
    #inside_box
    {
        width:550px;
        border:medium solid #0000FF;
        background-color:#FFFFCC;
        position: relative;
        top: 25%;
        margin-top:inherit;
        margin-left:auto;
        margin-right:auto;
        display:table
    }
    I would be really grateful if you could help me. I am new to web design.

    Thanks.
    Goodluck Nairaman
    Together Everyone Achieves More
    http://www.filmforfree.org

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    I changed a number of things. Here's your new HTML and CSS (written out below, but also attached.) Fixes everything for IE, and a few things for Firefox, too.

    HTML 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>Goodluck Nairaman </title>
    	<style type="text/css">
    	<!--
    	.style16 {color: #FF0000}
    	.style18 {font-size: large}
    	.style20 {font-size: 18px}
    	.style22 {font-size: medium}
    	.style23 {color: #0000FF}
    	-->
    	</style>
    	<link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    	<div id="content">
    		<p><span class="style16 style18"> "Please Help Me Fix the Problem in Internet Explorer "</span></p>
    		<p>The page works well in Firefox. But in Internet Explorer it spills out at the bottom.</p>
    		<p><img src="ebook.gif" width="263" height="340" align="left" hspace="5" />Please help  <span class="style16 style20 style23">“What Can I do?This page doesnt work in IE  ”</span></p>
    		<p>I would like box below to be centered and to have some sort of equal  margins at the sides.</p>
    		<p>Also I would like there to be a small margin at  the bottom of the page. The page seems to work well in Firefox.</p>
    		<p> But when  I try to open it in IE the contents spill out at the bottom and also  the whole box(the div&quot; shifts to one side.</p>
    		<p>What can I do to center the  div. I want all this pictures to be as they are. Please help</p>
    		<p><span class="style20 style23">&ldquo;What Can I do?This page doesnt work in IE  &rdquo;</span></p>
    		<p>I would like box below to be centered and to have some sort of equal  margins at the sides. Also I would like there to be a small margin at  the bottom of the page. The page seems to work well in Firefox but when  I try to open it in IE the contents spill out at the bottom and also  the whole box(the div&quot; shifts to one side. What can I do to center the  div. I want all this pictures to be as they are.</p>
    		<p>Please help <span class="style20 style23">&ldquo;What Can I do?This page doesnt work in IE  &rdquo;</span></p>
    		<p>I would like box below to be centered and to have some sort of equal  margins at the sides. Also I would like there to be a small margin at  the bottom of the page. The page seems to work well in Firefox but when  I try to open it in IE the contents spill out at the bottom and also  the whole box(&quot;the div&quot; )shifts to one side . </p>
    		<p>What can I do to center the  div. I want all the pictures to be as they are.</p>
       
    		<div id="inside_box">
    			<h2 class="style16 style22">Please help me to center this &quot;div&quot; properly. </h2>
    			<p>&nbsp;</p>
    			<p>I would like this div to be centered and to have some sort of equal margins at the sides. Also I would like there to be a small margin at the bottom of the page. The page seems to work well in Firefox but when I try to open it in IE the contents spill out at the bottom and also the whole box(the div&quot; shifts to one side. What can I do to center the div. I want all this pictures to be as they are. </p>
    			<p><img src="fred14.jpg" width="150" height="140" align="left" hspace="5" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque  vitae enim a nulla aliquet sollicitudin. Pellentesque lorem lacus,  mollis in, gravida consequat, volutpat vitae, arcu. In sollicitudin  consequat justo. Morbi volutpat, nibh ornare elementum faucibus, nunc  purus aliquet diam, eu adipiscing magna ligula ut elit. Vivamus  volutpat volutpat ante. Proin non tellus sed magna vestibulum ornare.  Nullam vel lectus. Nam non mi. Praesent sit amet ipsum. In hac  habitasse platea dictumst. Integer ligula risus, tincidunt sit amet,  imperdiet nec, interdum a, tortor. Nunc ac purus.</p>
    			<p><img src="gen.jpg" width="108" height="124" align="left" hspace="5" /><img src="Jeta.jpg" width="204" height="252" align="right" hspace="5" /></p>
    			<p>&nbsp;</p>
    			<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque  vitae enim a nulla aliquet sollicitudin. Pellentesque lorem lacus,  mollis in, gravida consequat, volutpat vitae, arcu. In sollicitudin  consequat justo. Morbi volutpat, nibh ornare elementum faucibus, nunc  purus aliquet diam, eu adipiscing magna ligula ut elit. Vivamus  volutpat volutpat ante. Proin non tellus sed magna vestibulum ornare.  Nullam vel lectus. Nam non mi. Praesent sit amet ipsum. In hac  habitasse platea dictumst. Integer ligula risus, tincidunt sit amet,  imperdiet nec, interdum a, tortor. Nunc ac purus. &quot;</strong> </p>
    			<p><img src="rmd1.jpg" width="118" height="126" align="left" hspace="5" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque  vitae enim a nulla aliquet sollicitudin. Pellentesque lorem lacus,  mollis in, gravida consequat, volutpat vitae, arcu. Please help  </p>
    			<div class="clear"> </div>
    			<p><span class="style20 style23">&ldquo;What Can I do?This page doesnt work in IE  &rdquo;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque  vitae enim a nulla aliquet sollicitudin. Pellentesque lorem lacus,  mollis in, gravida consequat, volutpat vitae, arcu. non tellus sed magna vestibulum ornare.  Nullam vel lectus. Nam non mi. Praesent sit amet ipsum. In hac  habitasse platea dictumst. Integer ligula risus, tincidunt sit amet,  imperdiet nec, interdum a, tortor. Nunc ac purus. </p>
    		</div>
    	</div>
    	<p>&nbsp;</p>
    </body>
    </html>
    Code:
    /* FONTS */
    body, h1, h2, p {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    h1, h2 {
    	font-weight: bold;
    	color:#FF0000;
    }
    p { 
    	font-family: Verdana;
    	font-size: 10pt; 
    	font-weight: normal;
    	color: #000000;
    }
    
    /* LAYOUT */
    body {
    	background: #00FF00;
    	text-align: center;
    }
    #content {
    	width: 700px;
    	margin: 17px auto;
    	padding: 15px;
    	border: inset 10px #0000FF;
    	background-color: #FFFFFF;
    	text-align: left;
    }
    /* Box model hack for IE */
    * html #content {
    	width: 750px;
    }
    
    #inside_box {
    	width: 550px;
    	margin: 10px auto;
    	padding: 15px;
    	border: solid 3px #0000FF;
    	background-color: #FFFFCC;
    	position: relative;
    }
    /* Box model hack for IE */
    * html #inside_box {
    	width: 586px;
    }
    
    .clear {
    	clear: both;
    }
    
    /*img {
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    }*/
    .imgborder {
    }

  4. #3
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Just a quick comment

    <link rel="stylesheet" href="style.css"/>
    <!-if[IE]-->
    <link rel="stylesheet" href="styleIE.css"/>
    <![endif]-->

    code for firefox, then fix in IE. thats what i usually do
    since stylesheets cascade, if the browser is IE the 2nd stylesheet will be included.
    any styles that are in both stylesheets, the 2nd takes precedence

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    I usually do the same, but the above solution works fine... it's just not valid CSS.

  6. #5
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Quote Originally Posted by smoseley
    I usually do the same, but the above solution works fine... it's just not valid CSS.
    hmm, its not valid? never knew that....why not?
    I understand its a workaround, but it validates to XHTML because the IE styles is commented, the seperate css stylesheets also validate.
    So is this "hack" or work-around looked down on somehow?
    I just think IE should hop on and start supporting everything properly :/

  7. #6
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    No, I'm saying what I did above isn't valid... with * html for LTE IE6

  8. #7
    Member
    Join Date
    Feb 2009
    Posts
    54
    Member #
    18241
    Steven
    You are a genius. You really are wonderful. Thank you very much. I am new to web design, HTML and CSS. I would really like to learn from you. What does VALIDATE CSS mean? How do I learn how to validate?

    Once again thank you so much for helping me to fix my web page.
    Together Everyone Achieves More
    http://www.filmforfree.org

  9. #8
    Member
    Join Date
    Feb 2009
    Posts
    54
    Member #
    18241
    Steven

    If you dont mind I have a few questions to ask you!

    1) Could you please explain to me what <Span></span> means?
    What is <Span></span> used for?

    2) In Dreamweaver I see Style12, Style16 Style4 etc. What does this mean. What is the "style element" used for and how can I go about using it?
    Together Everyone Achieves More
    http://www.filmforfree.org

  10. #9
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    you can use the span tag to wrap text in, so you can style it. Just like <p>.. I find this useful becasue if there is a seciton inside a <p> tag, you can style it seperately using <span> without having to start another paragraph.

    Paste this code into notepad or whatever and sae it is a .html file and open it in your web browser. It may help show you what I mean.

    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" xml:lang="en" lang="en"> 
    <head>
    <title>span example</title>
    <style type="text/css">
    p.paragraph
    {
    font-family: arial;
    color: #000000;
    font-size: 100%;
    line-height: 120%;
    }
    span.span_is_awesome
    {
    font-family: georgia;
    color: #ffff00;
    font-size: 90%;
    font-weight: bold;
    text-decoration: underline;
    }
    </style>
    </head>
    <body>
    <p class="paragraph">
    this is a paragraph which the typeface is arial, color is black, font size is 100%, and the line height is 120%. 
    this is a paragraph which the typeface is arial, color is black, font size is 100%, and the line height is 120%. <span class="span_is_awesome">this is a span that as you cna see has different styles. you can put this span inside a paragraph. to make certain pieces of text inside a paragraph or parent span, this is the best way to do it.</span> now we've gone back to the paragraph styling.
    </p> 
    <p class="paragraph">
    this is a paragraph which the typeface is arial, color is black, font size is 100%, and the line height is 120%. 
    this is a paragraph which the typeface is arial, color is black, font size is 100%, and the line height is 120%. <span class="span_is_awesome">this is a span that as you cna see has different styles. you can put this span inside a paragraph. to make certain pieces of text inside a paragraph or parent span, this is the best way to do it.</span> now we've gone back to the paragraph styling.
    </p> 
    </body>
    </html>

  11. #10
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    The main difference between a <p> (paragraph) and a <span> is that a paragraph is by default a "block" element, whereas a span is by default an "inline" element.

    What that means is that a paragraph is treated as a self-contained box of text. In other words, the page inserts a line-break (like a return-carriage) after the closing </p>. It also has margins top and bottom to provide space between paragraphs.

    Spans, on the other hand, have no styling applied to them by default. They are simply a chunk of text meant to be put inside a block element (such as a paragraph) so as to allow other styling to be applied to that sub-section of text.

    When I say valid markup, I'm referring to the World Wide Web Consortium's specifications (Reference www.w3.org for more info). They're the organization that invented HTML and CSS. So when you write your markup and it doesn't follow their rules, it's not "valid". They have a tool on their site that checks and validates your code for you.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:56 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com