CSS - [cakephp] Can't Get The Content"area" To Be The Correct Width "fluid"

Is there by chance a feature of MS Front Page that helps us out by changing height and width attributes to upper case,
which CSS does not recognize? If so, is there a way to disable this feature?
What is the popular alternative (among those in the know) to MS FP? The "normal-html-preview" screen format in FP is great.
Or, can we simply get rid of the height and width calls in "img src=" links?
Thank you for any attention to this.
Ed

Hi,

I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser.

Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important.

I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML

Here is my Html

PHP Code:
<DIV id="nav"> 
              <ul>
                <li id="1"><a href="Home">Home</a></li>
                <li id="2"><a href="About-us">About us</a></li>
                <li id="3"><a href="FlexNews">FlexNews</A></li>
                 <li id="4"><a href="Careers">Careers</A></li>
                <li id="5"><a href="Contact">Contact</A></li>
              </ul>
</div> 





Pretty straight forward, now my css


PHP Code:
#nav
{
    width:1005px;
    vertical-align: middle;
    text-align: left;
} 
#nav ul
{
    list-style: none;
    padding: 0;
    margin: 0;
} 
#nav li
{
    float: left;
    text-align: left;
} 
 
#1 a{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#1 a:hover
{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}

#2 a{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;



} 
#2 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#3 a
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#3 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#4 a
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#4 a:hover
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#5 a
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;

} 
#5 a:hover
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;

} 






Here is an exmple link http://dev.121design.co.uk/flextrade2/

Works fine in IE but not in Firefox, heres hopling someone can help.

Thanks in Advance, tried so many different methods and none seem to work.

Cheers,
Stuart

that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently.

However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image.

If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall.

(URL address blocked: See forum rules)/cv/cv.html

This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work?

I have designed one page. I am getting correct behavior in IE but there is some problem with Mozilla.

Here is the code sample:

<DIV class=ColumnHeader><SPAN class=noSort style="WIDTH: 6%; TEXT-ALIGN: center"><input type=checkbox id=chkSelAllAvail value="" name=chkSelAllAvail></SPAN> <SPAN style="WIDTH: 20%">Year</SPAN> <SPAN style="WIDTH:36%">Type of Report</SPAN> <SPAN style="WIDTH:24%">End Date</SPAN></DIV>

I have attached both screen shots of IE and Mozilla.

Can anyone help me ??

I'm working on a site layout using CSS. I want the content body and the top menu to expand the width of the browser. For some reason, in Safari, the content body works, but the top menu does not. Any suggestions?

HTML:

<div id="mainmenu">
<div id="mainmenutext">Menu will come here.</div>
<div id="mainmenuspace">&nbsp;</div>
</div>

CSS:

#mainmenu {
height: 27px;
width: auto;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #000000;
background-color: #FDDAE4;
clear:both;
position: absolute;
left: 0px;
top: 150px;
}

#mainmenutext {
margin-left: 4px;
color: #000000;
height: auto;
width: auto;
}

#mainmenuspace {
float: right;
height: auto;
width: auto;
}

www.mrossana.com/siteidea/

www.mrossana.com/siteidea/style.css

Thanks!

ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times?

Thnx

I have a very simple question:

I have this html code:
Code:

<div id="text">
<p><a>text</a></p>
<p><a class="red">text</a></p>
<p><a>text</a></p>
</div>

And this CSS style:
Code:

.red {  color: red;  }    
#text a{  color: blue;  }

I would like to apply the .red class, but it does not work, because the #text a overrides it. How can I solve that? It is just an example because it is a cause of a problem generated by a CMS, and I can only play with the CSS, not with the HTML side.

Hi guys!

Let's say I have this IN BODY directly:

Code:

<div id="top_section">
...
</div>

<ul id="menu">
...
</ul>

Or should I do it like this:

Code:

<div id="top_section">
...
</div>

<div id="menu">
<ul>
...
</ul>
</div>

UL and DIV are both block elements so I think the first is acceptable (combining block elements whatever their sort is logical or am I completely wrong here??)

Thank you

According to my best information the width and height of each box is equal to the width and height of the outer margin box.
1. Is that correct?

If so, then:
I would expect that if Box2 and box3 are enclosed in Box1, set to "width: 80%;" and "width: 20%;" respectively, and both set to "float: left;" then they should appear side by side in Box one.
2. Is that correct?

If that is also correct then:
3. Why does that not work for
http//rickduley.webs.com/Sample-Webpage.html (code attached). I have found that I must reduce the width of one of .mainText or .sidebar (standard.css) to have them appear side by side.

Thanks

my website is working flawlessly in ie8 and FF. but in IE7 content is not even rendering. i'm baffled and ready to stab.

http://littleredcamper.com/paseo/index.php
nothing in <div id="content_left"> or <div id="content_right"> is showing up.

however:
http://littleredcamper.com/paseo/workgroups.php
those divs don't exist and all content shows up.

anyone???

okay this code works fine in ie 6 and ie 7. I'm having trouble in FireFox 2.0.0.8 and FireFox 3.0.1

Code:

<html>
<head> 
<title>Navigation Bar</title>
<style type="text/css">

#main {
width: 800px;
background-color: white;
}

#head {
height: 160px;
width: 800px;
}

a , a:visited {
width: absolute;
background-color: #484848;
color: #0c0c0c;
margin: 0 auto;
padding: 0 auto;
min-width: 160px;
width: 160px;
max-width: 160px;
height: 40px;
border: #0c0c0c dashed 1px;
text-decoration: none;
text-align: center;
}

a:hover {
background-color: #0c0c0c;
color: #ffff00;
margin: 0 auto;
min-width: 160px;
width: 160px;
max-width: 160px;
height: 40px;
border: #ffff00 dashed 1px;
text-decoration: none;
text-align: center;
}

a#link {
width: 160px;
}

</style>
</head>
<body bgcolor="000000">
<table colspan="1" cellpadding="0" cellspacing="0" id="main">
<td id="head"></td><tr>
<td><a id="link" href="#">PAGE1</a><a id="link" href="#">PAGE2</a><a id="link" href="#">PAGE3</a><a id="link" href="#">PAGE4</a><a id="link" href="#">PAGE5</a></td>
</table>
</body>
</html>

basically the links should each be 160 pixels wide and they aren't. I'm a little to css and I but I have been doing html for over 4 years, so I'm afraid I'm going to have to use tables to get the effect I want. If anyone can't shed a little light on my problem I would really appreciate it.