[SOLVED] Another problem with mozilla

thewebkid · #1 (**permalink**) Nov 29th, 2007, 12:04

This site isn't yet published, but when I display this on firefox it looks like this: (see picture)

but on internet explorer it looks just fine, the background flows along with the more I add content.

How do i make sure that the more I add content the background image will repeat and stay...

Marc · #2 (**permalink**) Nov 29th, 2007, 12:06

Firstly, i reccommend that you code for Firefox and then fix for IE.

Can we see your code? An image wont help us on its own.

welshstew · #3 (**permalink**) Nov 29th, 2007, 12:08

it's difficult say without looking at the code.

you may need a clearing div to ensure your footer always drops to the bottom.

for the header, i have no idea unless i can get to some code.

sorry.

thewebkid · #4 (**permalink**) Nov 29th, 2007, 12:09

o yeah sorry.

HTML:

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Mark Verkler: LMFT; Life, Marriage, and Family counseling</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
    <style type="text/css">
        #picpara img {float: left; border: solid 1px #758E57; margin: 5px 5px 0px 0px}
       
    
    
    </style>
</head>
<body>

<div id="mastercontainer">
<div id="top">&nbsp;</div>

<div id="container">
    <!-- MASTER HEADER -->
    <div id="masthead">
    <div id="nav"><a href="index.htm">home</a> | <a href="about.htm">about</a> | <a href="contact.htm">contact</a> | <a href="services.htm ">services</a></div>
    <div id="banner"><img src="images/banner.jpg" alt=" " /></div>
    </div>
     <div class="clearing">&nbsp;</div>
    
    <!-- RIGHT CONTENT -->
    <div id="rightcontent">
    
    <div id="navlinks">
    <ul id="navigation">
        <li><a href="index.htm">home</a></li>
        <li><a href="services.htm">services</a></li>
        <li><a href="testimonies.htm">testimonials</a></li>
        <li><a href="location.htm">location</a></li>
    
    </ul>
    
    </div>
    <div class="samp">
    <p>"Mark Verkler helped with our family issues at home. Now our family has been drawn closer together......"</p>
    <p><a href="testimonies.htm">Read More...</a></p>
    
    </div>
    <div id="blank">&nbsp;</div>
    <div class="samp">
    <p>Anger leads to more dpression and anxiety. As we learn to forgive, it becomes easier to let go of that anger and gain
    the....</p>
    <p><a href="services.htm">Read More...</a></p>
    
    </div>
    
    </div>
    
    <!-- CONTENT -->
    <div id="content">
    <div id="firstpara"><h3>What I do...</h3>
    <p class="paragraph">My counseling practice emphasizes identifying barriers to relationships with God, others and self.  This can involve strongholds, unresolved grief, unresolved trauma, guilt, unforgiveness towards others, self and even thoughts against God.  We know that guilt and grieving are important for all of us, but when we get bogged down in it, we may need help from someone else.  </p>
    </div>
    
    <h3>How can MarkVerkler help me?</h3>
    <div id="picpara"><img src="images/834705_83039714.jpg" width="120" height="109" />
    <p class="paragraph">
When someone comes for their first session, we will attempt to identify the “presenting problem” i.e. the issue that prompted you to call for a counseling appointment.  Some examples could be:  I'm worried, I'm anxious, I have anger problems, I cant get over a certain loss, I'm plagued by negative thoughts, I cant sleep, I have relationship problems at home or work, I have flashbacks or nightmares about something traumatic I went through, I'm angry with God, I want a relationship with God but don't know how to do that.
</p>
<p>Once we identify the presenting problem, we'll explore other possible related problems and then determine the order and priority of what we will work on.  After this, we will begin to work on resolution of these problems in future sessions.  
</p>
<p>Many people that come to see me identify themselves as Christians and desire prayer and integration of scripture in the counseling session.  Of course, I have some clients that do not want that when they come to see me.  I'll respect your preference here.   </p>
<p>This is a basic overview of reasons for coming to counseling and an explanation of the goals of the first session.  Of course, I can answer specific questions on the phone or via email.  </p>
    </div>
    
   
    </div>   
    
    

</div>
<!-- FOOTER -->
<div id="footer">&nbsp;</div>

    
<!-- END NAV -->
<div id="endnav">
<p><a href="index.htm">home</a> | <a href="about.htm">about</a> | <a href="services.htm">services</a> | <a href="contact.htm">contact</a> | <a href="sitemap.htm">sitemap</a>
<br />Copyright &copy; Mark Verkler &bull; All Rights Reserved &bull; Website created by Adrian Rodriguez</div>

</div>

</body>
</html>

CSS:

Code: Select all

body 
{
    background-color: rgb(192,230,144);
    color: #405524;
    text-align: center;
}

/*LAYOUT STYLES*/

#mastercontainer
{
    width: 660px;
    text-align: center;
    margin: 0px auto 0px auto;
}

#container 
{
    width: 660px;
    height: auto;
    margin: 0px auto 0px auto;
    text-align: left;
    background-image:  url(images/backgroundimage.gif);
    background-repeat: repeat-y 
}

#rightcontent 
{
    float: right;
    width: 150px;
    border-left: dotted 2px #758E57;
    padding-left: 15px;
    margin-right: 25px;
}

#navlinks 
{
    margin: 20px 5px 5px 5px;
    text-align: right;
}

#content 
{
    width: 400px;
    float: left;
    margin: 0px 0px 0px 25px;
    padding-right: 10px
}

.clearing 
{
    clear: both;
    margin-bottom: 20px
}

#footer 
{
    background-image: url(images/bottomimage.gif);
    background-repeat: no-repeat;
    text-align: center;
    width: 660px;
    height: 33px;
    margin: 0px auto 0px auto;
}

#top 
{
    background-image: url(images/topimage.gif);
    background-repeat: no-repeat;
    text-align: center;
    width: 660px;
    height: 33px;
    margin: 0px auto 0px auto;
}

#banner img
{ 
    text-align: center;
    border: solid 1px #405524;
    margin: 5px 0px 0px 28px
}
    
/*NAV*/

#nav 
{
    float: left;
    margin-left: 28px;
}

#nav a, a:visited, a:active 
{
    text-decoration: none;
    color: #405524;
}

#nav a:hover 
{
    text-decoration: underline;
    color: #405524;
}
    

/*CONTENT*/

h1, h2, h3, h4, h5 
{
    font-style: italic;
    border-bottom: solid 5px #405524;
    margin-bottom: 0px
}

#content 
{
    text-align: left;
}

.paragraph 
{
    margin: 5px 0px 0px 0px
}
 
/*RIGHT CONTENT*/

.samp 
{
    text-align: center;
    font-style: italic;
    font-size: 10.5pt;
}

.samp a 
{
    float: right;
    text-decoration: none;
    color: #405524;
}

#navigation 
{
    list-style-type: none;
    color: #405524;
    text-align: right;
}

#navigation li 
{
    padding-bottom: 2px;
    border-bottom: dotted 2px #405524;
}
    
#navigation a, a:visited, a:hover, a:active 
{
    color: #405524;
    text-decoration: none;
}

/*END NAV*/

#endnav
    {
        text-align: center;
        color: #405524;
    }
    
#endnav a, a:visited, a:active 
{
    text-decoration: none;
    color: #405524;
}    

#endnav a:hover 
{
    text-decoration: underline;
    color: #405524;
}

karinne · #5 (**permalink**) Nov 29th, 2007, 12:27

This might answer your question

I have a wrapper and 2 floating divs but my border from my wrapper doesn't "wrap" around the floating div?

If it doesn't work ... put this online so we can help you. Code is nice but you have images in there that we don't have.

thewebkid · #6 (**permalink**) Nov 29th, 2007, 12:32

I have fixed the problem.

I did not have a clearing div at the bottom of my container, and I had to make sure that there weren't any margins set, so that it would not mess with the image, but I am sure there is a better way to do this so as soon as I publish it I will let you know.

karinne · #7 (**permalink**) Nov 29th, 2007, 12:34

I suggest the overflow: hidden method that I linked to instead of a clearing div ... much cleaner code.

thewebkid · #8 (**permalink**) Nov 29th, 2007, 12:39

Thank you, it worked much better.

MikeHopley · #9 (**permalink**) Nov 29th, 2007, 13:05

Quote:

Originally Posted by karinne

I suggest the overflow: hidden method that I linked to instead of a clearing div ... much cleaner code.

I actually prefer to use a clearing <div>, since this is the simplest and most stable solution. Both methods are effective, however.

More generally, I'm tired of hearing markup purists bang on about how using a few extra <div>s is "unsemantic" and evil. They then suggest an outrageously complicated and often unstable CSS solution; sometimes they witlessly introduce unsemantic content (see this stupid method of clearing, for example).

There's nothing wrong with extra <div>s. Sure, it's more efficient to keep your code lean, but an obsession with minimalist markup leads to absurd complications.

A similar situation occurs when a designer needs an extra styling hook. Again, the simplest solution is to add an extra <div> or <span> with an ID, but many designers will go to extraordinary lengths to avoid this, such as using infernally complicated and fragile CSS selectors.

Zealots.

</rant>

Note: I'm not calling Karinne a markup purist or a zealot. Quite the contrary: she always seems to use straightforward, pragmatic methods.

karinne · #10 (**permalink**) Nov 29th, 2007, 13:11

I am totally with you on this one Mike!

I too don't see that problem with a few extra divs when necessary .... and like you said, both methods work. Personally, I like the overflow method but have been using the breaking div since I found it and still use it in some cases.

thewebkid · #11 (**permalink**) Nov 29th, 2007, 14:26

So exactly which one should be used?

karinne · #12 (**permalink**) Nov 29th, 2007, 14:29

Doesn't matter. In this instance, I think the overflow one is just fine.

MikeHopley · #13 (**permalink**) Nov 29th, 2007, 14:39

Yep, what Karinne said.

Both are good methods. Choose whichever you prefer. If you can't decide, flip a coin.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Problem Seeing Image In Mozilla	Geeky Girl	Graphics and 3D	10	Mar 23rd, 2008 01:21
[SOLVED] Problem with float - In mozilla	jram	Web Page Design	4	Oct 20th, 2007 06:11
Problem with image in Mozilla ?? please help	DavidinLondon	JavaScript Forum	1	May 20th, 2006 16:03
odd slideshow problem (fine in IE, not in Mozilla)	jono	JavaScript Forum	7	Mar 17th, 2005 08:42
IE/Mozilla problem	crip	Web Page Design	1	Feb 12th, 2004 18:33

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Another problem with mozilla