Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Need help with stylesheet.

0 views
Skip to first unread message

Lars Kvanum

unread,
Dec 9, 2009, 1:53:46 PM12/9/09
to
Hi, all!

I'm having some problems designing my page and was hoping someone here
could help out!

My problems:
* I need something equivalent to min-width for IE
* My menu seems to overlap the content area
* When the right side of FF passes the menu, it jumps down a bit on
the page

Any help would be greatly appreciated!

Cheers :)

Here are my sources:
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 id="ctl00_Head1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" media="screen" href="css/
main.css" title="Main CSS">
<link rel="stylesheet" type="text/css" media="screen" href="css/
tabs.css" title="Main CSS">
<title></title>
</head>
<body id="news">
<form name="aspnetForm" method="post" action="default.aspx"
id="aspnetForm">

<div id="top"><br/><br/><p/><h1>logo</h1><p/><br/><br/></div>
<div id="middle">
<div id="leftcolumn">Left menu</div>
<div id="rightcolumn">Right menu</div>
<div id="menupanel">
<div id="header">
<ul>
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-news"><a href="#">News</a></li>
<li id="nav-products"><a href="#">Products</a></li>
<li id="nav-about"><a href="#">About</a></li>
<li id="nav-contact"><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
Some text...
<p>
</p>ff<p>
</p>dd<p>
</p>ff<p>
</p>dd<p>
</p>ff<p>
</p>dd<p>
...and then some...!
</p></div>
</div>
</div>
</form>
</body></html>
</code>

main.css:
<code>
BODY
{
min-height: 100%;
text-align: center;
background-image: url(../images/background.png);
background-repeat: repeat-x;
position: relative;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#top {width: 100%; }
#logo
{
width: 800px;
height: 100px;
border: 2px solid #C3947F;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-top: 10px;
}

#menupanel {margin: 0px 150px; min-width: 550px; float: none;}
#middle {width: 100%; }
#leftcolumn { margin-top: 50px; float: left; width: 150px; }
#rightcolumn { margin-top: 50px; float: right; width: 150px;}
#content {
min-width: 550px;
margin: 0 155px;
border-bottom: 2px solid #C3947F;
border-top: none;
border-left: 2px solid #C3947F;
border-right: 2px solid #C3947F;
background-color: #ffffff;}
#footer { width: 100%; }
</code>

tabs.css
<code>
body {
margin:0;
padding:0;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
} html>body {font-size:small;}

#header {
float:left;
width:100%;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("../images/left_both.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
border-bottom:1px solid #765;
}
#header a {
float:left;
display:block;
width:.1em;
background:url("../images/right_both.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#header > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color:#333;
}
#home #nav-home, #news #nav-news,
#products #nav-products, #about #nav-about,
#contact #nav-contact {
background-position:0 -150px;
border-width:0;
}
#home #nav-home a, #news #nav-news a,
#products #nav-products a, #about #nav-about a,
#contact #nav-contact a {
background-position:100% -150px;
padding-bottom:5px;
color:#333;
}
#header li:hover, #header li:hover a {
background-position:0% -150px;
color:#333;
}
#header li:hover a {
background-position:100% -150px;
}
</code>

Jim Moe

unread,
Dec 9, 2009, 2:55:57 PM12/9/09
to
On 12/09/09 11:53 am, Lars Kvanum wrote:
>
> I'm having some problems designing my page and was hoping someone here
> could help out!
>
> My problems:
> * I need something equivalent to min-width for IE
> * My menu seems to overlap the content area
> * When the right side of FF passes the menu, it jumps down a bit on
> the page
>
> Any help would be greatly appreciated!
>
Yet you do not provide a test case URL.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Lars Kvanum

unread,
Dec 9, 2009, 4:13:39 PM12/9/09
to
On 9 Des, 20:55, Jim Moe <jmm-list.AXSPA...@sohnen-moe.com> wrote:

>   Yet you do not provide a test case URL.

Thing is...I don't have a page with the test on it :S I might get
something up by tomorrow, though

Lars Kvanum

unread,
Dec 9, 2009, 4:24:41 PM12/9/09
to
Here's the hosting pages, by the way: http://www.tiwas.cjb.net/

Chris F.A. Johnson

unread,
Dec 9, 2009, 8:15:28 PM12/9/09
to
On 2009-12-09, Lars Kvanum wrote:
> Here's the hosting pages, by the way: http://www.tiwas.cjb.net/

First fix the HTML so that it validates at <http://validator.w3.org>.


--
Chris F.A. Johnson <http://cfajohnson.com>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)

Lars Kvanum

unread,
Dec 10, 2009, 7:55:53 AM12/10/09
to
http://www.kvanum.no/test/ isn't hosted on a free service, and it now
validates :)

Rob W.

unread,
Dec 10, 2009, 12:50:55 PM12/10/09
to
Lars Kvanum schreef:

> http://www.kvanum.no/test/ isn't hosted on a free service, and it now
> validates :)


The source may not be invalid,
but it sure loooks funny with all the empty p-elements and text in between:

<div id="content">
Some text...
<p></p>
ff
<p></p>
dd
<p></p>
ff
<p></p>
dd
<p></p>
ff
<p></p>
dd
<p>...and then some...!</p>
</div>

How are you gonna style your text?

--
Rob

Jim Moe

unread,
Dec 10, 2009, 5:34:09 PM12/10/09
to
On 12/09/09 11:53 am, Lars Kvanum wrote:
>
> I'm having some problems designing my page and was hoping someone here
> could help out!
>
> My problems:
> * I need something equivalent to min-width for IE
> * My menu seems to overlap the content area
> * When the right side of FF passes the menu, it jumps down a bit on
> the page
>
Search the web for the min-width feature. It must be implemented in
Javascript for IE6.
I do not understand points 2 and 3.
Because you prevent the main content area from shrinking (min-width),
the right menu will overlap it when the browser's viewport becomes small
enough. Exactly how the overlap occurs tends to be browser specific.
About the only way to prevent the overlap is to enclose the content and
the two menus in a wrapper whose width has a min-width setting itself.

In the future you may want to avoid using CSS reserved keywords for ID
and CLASS names. E.g.: top, middle. Although it is legal, it's confusing.

dorayme

unread,
Dec 10, 2009, 6:50:41 PM12/10/09
to
In article
<02a831af-d7b7-45ce...@z41g2000yqz.googlegroups.com>,
Lars Kvanum <lar...@extreme.no> wrote:

> http://www.kvanum.no/test/ isn't hosted on a free service, and it now
> validates :)

Why are you doing this:

<div id="top">

<br>

<br>

<p>

</p><h1>logo</h1>

<p>

<br>

<br>

</p></div>

?


If you want to even temporarily make up a bit of height, do it via CSS.
You can use height, or margins or paddings.

--
dorayme

0 new messages