8 replies [Last post]
burkbum
burkbum's picture
Offline
Regular
Huntington Beach, CA, USA
Last seen: 16 years 17 weeks ago
Huntington Beach, CA, USA
Joined: 2003-07-24
Posts: 29
Points: 0

I had this in the Site Check forum and got no responses - maybe here?

This is my first CSS layout (no tables! Smile ) :http://home.earthlink.net/~burkbum/index.html while I'm pleased with the way it looks in IE and Opera (scroll bar styles aside), I'm having a problem with it in Mozilla 1.4. If you go to a page where the body text is particularly long (http://home.earthlink.net/~burkbum/2002/thoughts-breakfast.html) the body text spills outside of the leftbody div tag. Why's it doing that? Thanks for the help.

"Seriously."

burkbum
burkbum's picture
Offline
Regular
Huntington Beach, CA, USA
Last seen: 16 years 17 weeks ago
Huntington Beach, CA, USA
Joined: 2003-07-24
Posts: 29
Points: 0

Don't everybody all talk at once...

I found good resources that helped me get over three separate issues I was having with Mozilla - as well as issues changing my doctype from HTML 4.1 to XHTML 1.0.

http://devedge.netscape.com/viewsource/2002/img-table/ - This article helped me with the Mozilla issues

http://www.alistapart.com/stories/betterliving/ - This article directed me to the previous article, as well as provide me with insight into changing doctypes.

Hope this helps others with similar Mozilla/doctype related issues.

"Seriously."

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 23 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Mozilla problem

Hi,

I assume from those links that you've sorted your problems out. However I see that the page is still spilling out of the div in Mozilla (unles you haven't got around to changing it).

If you haven't sorted it the reason is that you have set an 80% height on the leftcontent div. Mozilla takes this as 80% of the window height and so any text greater than 80% of the window height will spill out of the div.

I'm not sure if this will work but might be worth a try.

Set a min-height (which moz understands and IE doesn't) at the end of your leftcontent div and then use the child selector to pass height auto to mozilla and excleding ie because it doesn't understand child selectors.

e.g.

#leftcontent {
min-height:80%;
}
html>body #leftcontent {height:auto}

I haven't tested it but it might be worth a try.

If you've already solved the problem then sorry and ignore this post.

Paul

jacky
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2003-08-14
Posts: 8
Points: 0

Mozilla problem

I guess you can use overflow:auto to solve the problem.

burkbum
burkbum's picture
Offline
Regular
Huntington Beach, CA, USA
Last seen: 16 years 17 weeks ago
Huntington Beach, CA, USA
Joined: 2003-07-24
Posts: 29
Points: 0

Mozilla problem

Actually, I haven't solved the text-spilling-out problem. The problems I was able to fix were small and I wasn't going to worry about them, but I was able to fix them on my own. The BIGGER problem of the text was more difficult - I sort of thought the % was messing things up but didn't know how to get around it. I will try these suggestions. Thanks.

"Seriously."

burkbum
burkbum's picture
Offline
Regular
Huntington Beach, CA, USA
Last seen: 16 years 17 weeks ago
Huntington Beach, CA, USA
Joined: 2003-07-24
Posts: 29
Points: 0

Mozilla problem

Thanks Pob and jacky -

I tried Jacky's suggestion first because it was simpler (less code) - but that produced a scrollbar in the content area whenever there was more text than the window - not the aesthetic I want.

So, moving onto Pob's soultion - this did the trick, but it fouls up my iframe on the home page by somehow ignoring the height instruction of my iframe style in IE.

However, I am going to get rid of my iframes anyway, so this will just make me to that right away.

I'm still really new to CSS, so child selectors (?) are new to me. I will have to read about that. From what I see from this, would a child selector allow me to use different Link styles in my menu than I use in my body?

Burk

"Seriously."

jacky
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2003-08-14
Posts: 8
Points: 0

Mozilla problem

Child and descendant selector are useful.
For example, a page divided into navigation and content column, where the hyperlink inside them use different styles.
use selector like

div#navigation a{
...........style here...............
}

div#maincontent a{
...........style here...............
}

This keep your html code clean and easy to follow.

You can read more about the selector in Eric Meyer's old articles:
http://www.meyerweb.com/eric/writing.html

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 23 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Mozilla problem

Hi,

Quote:

would a child selector allow me to use different Link styles in my menu than I use in my body

The child selector selects an element which is a direct child of another element. Unfortunately (or fortunately in some cases) IE doesn't undertsand this rule and ignores it. Therefore it is used as a hack to give style to mozilla (and other browsers) but keep them hidden from IE.

This is useful in situations where the browsers differ in their interpretations of some commands and allows IE to work with its version and then you can overrule it for moz by using the child selector.

I'm not keen on hacks but this one is widely used and quite useful.

Regarding your question about setting different link colours etc (If I understand you correctly) for the menu (or other parts of the page) this can be achieved quite easily by setting up a class as follows.

If you have a set of links that you want a different colour you can add a class to the style definition for the links. Therefore the links that are within the class that you define will behave differently to the links on the rest of the page.

e.g.

<style type="text/css" media="screen"> 
<!-- 
a.leftlink:link { 
color: #00FF33; 
background-color: #FFFFFF; 
} 
a.leftlink:visited { 
color: #990000; 
background-color: #FFFFFF; 
}
a.leftlink:hover {
color: #FF0000;
background-color: #FFFFFF;
}
a.leftlink:active {
color: #990000;
background-color: #FFFFFF;
}
-->
</style> 

This means that all < a> tags that have a class of leftlink will be affected by these rules.

and then in the body:

<div> 
<p><a class="leftlink" href="#">Hello</a></p> 
<p><a class="leftlink" href="#">Goodbye</a></p> 
<p><a class="leftlink" href="#">Hi</a></p> 
</div> 

You must set the class in each <a> anchor for this to take effect. However there is a more efficient way to code the above example and that relies on using the class in the <div> tag and not in the <a> tag. Also the format is slightly different as follows.

e.g.

<style type="text/css" media="screen"> 
<!--
.rightlink a:link { 
color: #0000FF; 
background-color: #FFFccc; 
} 
.rightlink a:visited { 
color: #990000; 
background-color: #FFFccc; 
} 
.rightlink a:hover {
color: #FF0000;
background-color: #FFFccc;
}
.rightlink a:active {
color: #990000;
background-color: #FFFccc;
}
-->
</style> 

and then in the body:

<div class="rightlink">
<p><a href="#">Hello</a></p>
<p><a href="#">Goodbye</a></p>
<p><a href="#">Hi</a></p>
</div>
[/code]

This means that any <a> tags found in the rightlink class will take on the above rules. <a> tags outside the rightlink class will not be affected.

The point being that in the second version there is a lot less code especially if there are a lot of links as you can just set the class in the div. You just have to make sure that all anchors (<a tags>) are inside the block that has a class of rightlink.

In the first version the class has to be put in every anchor tag, which makes the page heavier and requires more coding if you have a lot of links.

Hope this was what you meant Wink

Paul

burkbum
burkbum's picture
Offline
Regular
Huntington Beach, CA, USA
Last seen: 16 years 17 weeks ago
Huntington Beach, CA, USA
Joined: 2003-07-24
Posts: 29
Points: 0

Mozilla problem

WOW! That was exceedingly thorough! Laughing out loud

That was what I meant. I didn't know where to put the class tag in, for example, a.leftlink:link or by using the child selector. That answers my question beautifully!

Cheers to both of you! Burk

"Seriously."