CSS Float in IE

I'm having trouble with my 2 column layout... The text in my
side panel is wrapping badly in IE, but perfectly OK in
Firefox/Safari. Image widths are unaffected.
I've got a layout that needs to fit to a repeating background
(Y tiling) structure. My layout is a wrapper, banner, container for
the main & side panels & a footer. I'm sure this is
something simple, but I'm not seeing what the trouble is so would
appreciate an expert eye please!
Here's the
link to my page & my css (I've left out some of the
absolute elements inside the banner):

Can anyone help please?

Similar Messages

Rating Widget: CSS Float question

I've successfully modified the Rating widget with our own rating graphics (smaller star's) but one issue I cannot figure out is how to get rid of what looks like a margin or padding around the ratingButtons... actually, everything within the ratingContainer itself. Everything works fine, just trying to tweak it's apperance on screen in relationship to other elements above and below the widget.
In SpryRating.css, the ratingContainer is floated left as well as the ratingButton(s) by default. I didn't change that. I did however change the width and height of the .ratingButton classes to match the new width and heigh of the graphic elements.
I think this is really more of a CSS/Float issue, but I haven't been smart enough to figure it out over the past few days while trying to research.
The end result should make the ratingContainer the same height as the ratingButton(s). I've already tried specific values for the height of the ratingContainer as well as 'auto'.
Any help would be welcome and appreciated! Thanks!
-JL

jasonLampitt wrote:
Really?
So, I'm either completely misconstruing your reply (which I admit is possible) but I'm more inclined to take it at face value.
I am sorry, I fail to see what was ambigious in my reply. I am merely stating the facts and I am sorry that you managed to see otherwise.
As a contributor to this forum and having no connection to Adobe other than to use their products, I use my spare time to help others with THEIR problems.
In doing so, we ask that person to assist us so that we can experience the problem first hand which in turn will be indusive to an objective answer.
In your case we have not been able to reconstruct the problem, thus we have not been able to help. This is of no concern to us, but it does not help you.
Have a good day!

CSS Float Problem

Hi All, 10 years since I've been on here (in the days of tables) I have, I'm sure a very basic css float problem in the footer and hopefully someone could take the time to review it for me. I have checked everything but can't find the problem. Thanks in advance;
example of problem here http://davidbrown.ipower.com/template/template.htm
<!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=utf-8" />
<title>Our Jewelry Retail Secrets - Thank You</title>
<link href="../stylesheet/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper">
<div id="wrapperfix">
    <div id="toporange_bg">login</div>
</div>
   <div id="wrapperfix_top_grey">
    <div id="top_grey_content_wrapper">
      <div id="big_logo"></div>
      <div id="welcome_user">Welcome "username here"</div>
    </div>
</div>
</div>
    <div id="main_content">
      <p>
        
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p> Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. </p>
</div>
    <div id="footer_container">
      <div id="footer">
        <div id="footer_left">Footer Left</div>
        <div id="footer_centre">Footer Centre</div>
      <div id="footer_right">Footer Right</div></div>
    </div>
</body>
</html>
#footer_container {
background-color: #333333;
width: 100%;
top: 0px;
margin: 0px;
padding: 0px;
#footer {
background-color: #666666;
min-width: 1000px;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 1000px;
height: 150px;
overflow: hidden;
clear: both;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
#footer_left {
float: left;
width: 33%;
margin: 0px;
padding: 0px;
height: 150px;
#footer_centre {
width: 33%;
height: 150px;
margin: 0px;
padding: 0px;
float: left;
#footer_right {
float: left;
width: 33%;
height: 150px;
margin: 0px;
padding: 0px;

I still don't see the #footer_left rule in the CSS in the online example at
http://davidbrown.ipower.com/template/template.htm

CSS Float Problems

I'm just becoming comfortable with using CSS. At least, I
thought I was. I put together a test page and it worked on IE 7.
Then, I downloaded Firefox and Safari to check compatability on
other browsers.
I have a centered page with a top navigation bar, content
area, and a footer (bottomNavBar). Inside the content area I have
two sections, a left section and a right section. In the left there
should be text, some sort of welcome text. In the right some sort
of Flash intro video the user can play when they choose.
The problem: I got the float to work in IE 7 (Sometimes it
wouldn't. It seems tempermental.). However, the floats won't work
on the other 2 browsers. In the other 2 it puts the first div
listed above the second instead of side by side like in IE 7.
Here is the code:

To make your contentIndexFlashIntro & contentIndexWelcome
divs sit
side-by-side you have to assign each a width. The combined
total of those
widths must be <=800px.
Walt
"JasonTheAdobeFan" <[email protected]> wrote
in message
news:[email protected]...
> I'm just becoming comfortable with using CSS. At least,
I thought I was. I
> put
> together a test page and it worked on IE 7. Then, I
downloaded Firefox and
> Safari to check compatability on other browsers.
>
> I have a centered page with a top navigation bar,
content area, and a
> footer
> (bottomNavBar). Inside the content area I have two
sections, a left
> section and
> a right section. In the left there should be text, some
sort of welcome
> text.
> In the right some sort of Flash intro video the user can
play when they
> choose.
>
> The problem: I got the float to work in IE 7 (Sometimes
it wouldn't. It
> seems
> tempermental.). However, the floats won't work on the
other 2 browsers. In
> the
> other 2 it puts the first div listed above the second
instead of side by
> side
> like in IE 7.
>
> Here is the code:
>
>
> ***First is the HTML***
>
> <body>
> <div class="header">
> <img src="Logo001.png" />
> </div>
> <div class="container">
> <div class="topNavBar">
> <ul class="topNavBarUL">
> <li class="topNavBarLI"><a
class="topNavBarLinksCurrent"
> href="index.htm">Home</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page2.htm">Link2</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page3.htm">Link3</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page4.htm">Link4</a></li>
> </ul>
> </div>
> <div class="content">
> <div class="contentIndexFlashIntro">
> <script type="text/javascript">
> AC_FL_RunContent(
> 'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
>
version=9,0,28,0','width','350','height','350','title','IntroVideo','src','Intro
> Video002','quality','high','pluginspage','
http://www.adobe.com/shockwave/downloa
>
d/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','IntroVideo002'
> //end
> AC code
> </script><noscript><object
> classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
> codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
> rsion=9,0,28,0" width="350" height="350"
title="IntroVideo">
> <param name="movie" value="IntroVideo002.swf" />
> <param name="quality" value="high" />
> <embed src="IntroVideo002.swf" quality="high"
> pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Versio
> n=ShockwaveFlash" type="application/x-shockwave-flash"
width="350"
> height="350"></embed>
> </object></noscript>
> </div>
> <div class="contentIndexWelcome">
>

> <p class="smallText">Paragraph 1</p>
> <p class="smallText">Paragraph 2</p>
> <hr/>
> <ul><u class="smallText">Unordered
List</u>
> <li><span class="smallText">Item
1</span></li>
> <li><span class="smallText">Item
2</span></li>
> <li><span class="smallText">Item
3</span></li>
> <li><span class="smallText">Item
4</span></li>
> <li><span class="smallText">Item
5</span></li>
> <li><span class="smallText">Item
6</span></li>
> </ul>
> <hr/>
> <p class="smallText">Concluding
Paragraph</p><br />
> </div>
> </div>
> <div class="bottomNavBar">
> <p>© Copyright 2008</p>
> </div>
> </div>
> </body>
>
> *********************************
> ***Next is the external CSS.***
>
> body {
> font-family: Arial, Helvetica, sans-serif;
> background-color: #999999;
> margin: 0px;
> }
>
> .header {
> background-color: #FFFFFF;
> width: 100%;
> margin: 0px;
> padding: 0px 0px 0px 0px;
> top: 0px;
> }
>
> .container {
> background-color: #FFFFFF;
> width: 800px;
> margin-left: auto;
> margin-right: auto;
> margin-bottom: 0px;
> margin-top: 0px;
> }
>
> /* top navigation bar class
> ** I prefer to have a nav bar to the top rather than the
left
> */
> .topNavBar {
> width: 800px;
> height: 22px;
> background-color: #0080EE;
> border: 0px solid #FFFFFF; /* I turned off the pixel
width because I
> didn't
> ** want a border right now. But I left the rest in case
> ** I wanted to change it back to 1px.
> */
> }
>
> /* topNavBar link properties
> ** The idea is to have each link highlight when cursor
comes over any part
> ** of the section, not just the words. Then goes back to
normal when
> cursor
> ** leaves. The current page should have its own link
highlighted always.
> */
> ul.topNavBarUL {
> height: 17px;
> float: left;
> width: 100%;
> padding: 0;
> margin: 0;
> list-style-type: none;
> }
>
> li.topNavBarLI {
> display: inline;
> }
>
> a.topNavBarLinks:link, a.topNavBarLinks:active,
a.topNavBarLinks:visited {
> float: left;
> text-decoration: none;
> color: #FFFFFF;
> background-color: #0080EE;
> padding: 0.15em 0.6em;
> border-right: 1px solid #FFFFFF;
> }
>
> a.topNavBarLinks:hover {
> color: #FFFFFF;
> background-color: #FF9900;
> text-decoration: none;
> }
>
> a.topNavBarLinksCurrent, a.topNavBarLinksCurrent:active,
> a.topNavBarLinksCurrent:visited,
a.topNavBarLinksCurrent:hover {
> float: left;
> text-decoration: none;
> color: #FFFFFF;
> background-color: #00FF33;
> padding: 0.15em 0.6em;
> border-right: 1px solid #FFFFFF;
> }
>
> /* content class
> ** This is the part of the page that the content will go
in.
> ** It should have the full width of the container class
and
> ** stretch in height based on the content with a minimum
> ** height of 500px.
> */
> .content {
> width: 800px;
> min-height: 400px;
> background-color: #FFFFFF;
> font-family: Arial, Helvetica, sans-serif;
> color: #000000;
> }
>
> /* content links
> ** The links in the content area will just be the
regular links.
> ** Navigation links will all be given special classes to
define them.
> */
> a:link, a:active, a:visited {
> color: #0080EE;
> text-decoration: none;
> }
>
> a:hover {
> color: #FF9900;
> text-decoration: underline;
> }
>
> /* content headings, hr
> */
> h1, h2, h3, h4, h5, h6 {
> font-family: Arial, Helvetica, sans-serif;
> color: #00FF33;
> margin-bottom: 2px;
> }
>
> hr {
> color: #0080EE;
> }
>
> p {
> text-indent: 20px;
> margin-top: 4px;
> }
>
> ul {
> margin-top: 4px;
> }
>
> li {
> list-style: square;
> color: #00FF33;
> }
>
> .contentIndexFlashIntro {
> padding-top: 2px;
> padding-right: 2px;
> float: right;
> }
>
> .contentIndexWelcome {
> float: left;
> text-align: justify;
> padding-top: 4px;
> padding-right: 10px;
> padding-bottom: 4px;
> padding-left: 4px;
> }
>

Css floats

I would like to create a "floating table" (for lack of a
better description)
Where as There would be a block element say <p
id="thisblock">This block would have some text, images, all
formatted and wrapped in a border - thanks to #thisblock {...} in
css</p>
now in that box, i would like to put a list that would split
down 2 columns, left one will be aligned right, right aligned left
ie:
This block would have some text, images, all formatted and
wrapped in a border
________XXXXXXXXXXXXXXXX_____XXXXXXXXXXXXXXXXXXXXX
__ XXXXXXXXXXXXXXXXXXXXXX____XXXXXXXXXXXXXXXXXXXXXXXX
_________ XXXXXXXXXXXXXXX____XXXXXXXXXXXXXXXXXXXXXXX
then some more text down here
well you get the idea. I tried using floats, but of course
the "then some more text" ends up buried under the list. I tried
clear: both, but that didn't help. im new to css and any help would
be appreciated!
Thanks

Why not use a table within the floating element?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"m0piqsutjjqv4du" <[email protected]> wrote
in message
news:ejakns$338$[email protected]..
>I would like to create a "floating table" (for lack of a
better
>description)
>
> Where as There would be a block element say <p
id="thisblock">This block
> would
> have some text, images, all formatted and wrapped in a
border - thanks to
> #thisblock {...} in css</p>
>
> now in that box, i would like to put a list that would
split down 2
> columns,
> left one will be aligned right, right aligned left ie:
>
> This block would have some text, images, all formatted
and wrapped in a
> border
> ________XXXXXXXXXXXXXXXX_____XXXXXXXXXXXXXXXXXXXXX
> __ XXXXXXXXXXXXXXXXXXXXXX____XXXXXXXXXXXXXXXXXXXXXXXX
> _________ XXXXXXXXXXXXXXX____XXXXXXXXXXXXXXXXXXXXXXX
> then some more text down here
>
> well you get the idea. I tried using floats, but of
course the "then some
> more
> text" ends up buried under the list. I tried clear:
both, but that didn't
> help.
> im new to css and any help would be appreciated!
>
> Thanks
>

Help with css float layout

Hi I am having problems with a page http://beermattonline.co.uk/manuscript_doctor/fees_submissions1.html half way down after the fees sub heading I can't get the next line to appear underneath it instead of to the right. Any suggestions? Here is my CSS.
Thanks in advance, Matt.
.banner {
.line {
   margin-top: 5px;
   margin-bottom: 5px;
   .small_line {
   margin-top: 5px;
   margin-bottom: 5px;
    .long_line {
   margin-top: 50px;
   margin-bottom: 5px;
   margin-left:55px;
   marging-right:55px;
   .footer {
   font-size: small;
   text-align: center;
.content {
width: 710px ;
margin-left: auto ;
margin-right: auto ;
background-color:#fff8e8;
border-style:solid;
border-width:0px;
height: 1000px;
.sub_heading {
float:right;
border-style:solid;
border-width:2px;
margin-top:20px;
border-color:#473d33;
width:530px;
padding:5px;
border-color:#ffedc7;
background-color:#fff2d6;
.sub_sub_heading {
float:left;
border-style:solid;
border-width:2px;
margin-top:20px;
border-color:#473d33;
width:250px;
padding:5px;
border-color:#ffedc7;
background-color:#fff2d6;
.text_centre {
float:right;
border-style:solid;
border-width:0px;
margin-top:5px;
border-color:#473d33;
position: relative;
width:543px;
background-color:#fff8e8;
.links {
border-style:solid;
border-width:0px;
margin-top:4px;
margin-bottom:4px;
border-color:#473d33;
background-color:#fff8e8;
font-size: small;
text-align:center;
A:link {text-decoration: none; color: #26221e; }
A:visited {text-decoration: none; color: #26221e; }
A:active {text-decoration: none; color: #ffffff; }
A:hover {text-decoration: underline; color: #ff7d3e; }
.float_left {
float:left;
width: 140px;
border-style:solid;
border-width:2px;
margin-top:20px;
margin-right:10px;
margin-bottom:20px;
padding: 5px;
border-color:#ffedc7;
background-color:#fff2d6;
body {
font-family: Georgia, "Lucida Sans Unicode", lucida, Verdana, sans-serif;
bont-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
background-color:#fff8e8;
letter-spacing: 1px;
color: #4c443c;
h1 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h2 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h3 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h4 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h5 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h6 { color: #26221e; margin-bottom:0px; margin-top: 5px;}

If you change the next to last style definition in your CSS file "manuscriptdoctor.css" from
h5 { color: #26221e; margin-bottom:0px; margin-top: 5px; }
to:
h5 { color: #26221e; margin-bottom:0px; margin-top: 5px; clear: both; }
everything should be fine.

Learning CSS floats

I'm learning CSS layout. As an exercise, I've been creating
divs and changing the rules. Before I hit Apply, I try to predict
what will happen. If It doesn't happen the way I think it will, I
want to know what it is that I'm not understanding.
The problem is that Display View will not always accurately
reflect the changes I make. In the following example (I've posted
the code, but I'm not sure what it will look like), I've got two
15% wide static boxes. If I float both of them left, they line up
side by side: blue box on left, green box on right. If I change
green box to float: none, the green box moves over under the blue
box.
It was making me crazy! I read the float rule over and over
trying to figure out what it was that I didn't understand. The
green box is NOT supposed to change position. I finally checked it
in IE and, lo and behold, the boxes were acting like they should.
I tried refresh, I tried exiting and reloading the file.
Still looks wrong in Design View.
If your Design View looks ok, change the green box to float:
left and then back to float: none.
Is there any way to get DW 8 to have Design View accurately
reflect the code?
Thanks,
DennyA

Hi Denny,
Dreamweaver rendering is not perfect, but in this case IE
gets the
rendering wrong and DW is correct. Open your page in Firefox
and you
will see that it also renders like DW.
According to the CSS2 spec: "Since a float is not in the
flow,
non-positioned block boxes created before and after the float
box flow
vertically".
http://www.w3.org/TR/REC-CSS2/visuren.html#floats
Hope this helps,
Randy
> The problem is that Display View will not always
accurately reflect the
> changes I make. In the following example (I've posted
the code, but I'm not
> sure what it will look like), I've got two 15% wide
static boxes. If I float
> both of them left, they line up side by side: blue box
on left, green box on
> right. If I change green box to float: none, the green
box moves over under the
> blue box.
>
> It was making me crazy! I read the float rule over and
over trying to figure
> out what it was that I didn't understand. The green box
is NOT supposed to
> change position. I finally checked it in IE and, lo and
behold, the boxes were
> acting like they should.

CSS Float Drop in IE8 but not Compatibility Mode

I'm testing code for my home page across different browsers, and encountered the common IE float drop problem. This does not occur in Firefox, Chrome, Opera, or IE8 in Compatibility Mode; but does occur in IE8 standard mode. It's a bit confusing, since I usually encounter this problem in Compatibility Mode.
I have tried using clear:none; as I thought the content was clearing the float:left of a large flash image on the left side of the window, but it didn't solve the problem. I have 3 image buttons whose combined heights equate that of the flash image (all 622px), and these are all in a column div floating to the right. All of these are flush margin:0 and padding:0, border:none. The flash image has it's own class stating margin:0, padding:0, border:none as well. These divs are fixed pixel widths and heights. I tried placing them in a larger container div with fixed width and height, which didn't solve the problem. Again, this only occurs in IE8 Compatibility Mode.
This is the code below:
div id="container">
embed src="index.swf" allowscriptaccess="always" allowfullscreen="true" height="622" width="509" align="left" class="flashhome"> /embed>
div id="homecontright">
a href="services.html?panel=5">
img src="button1.gif" align="top" border="0" alt="b1" class="imageright"/> /a>
a href="smt.html">
   img src="button2.gif" align="top" border="0" alt="b2" class="imageright"/> /a>
   a href="jobs.html">
   img src="button3" align="top" border="0" alt="b3" class="imageright"/> /a>
/div>
div class="floatfix"> /div>
   div id="foot" align="center">
   contact info footer
   /div>
   /div>
Here is the style information from my separate stylesheet
#homecontright { margin:0; padding:0; border:none; width:493px; height:622px; overflow:visible; float:right; display:block; }
.imageright {margin-left: auto; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; display: block; float: right }
.flashhome { width:509px; height:622px; margin:0; padding:0; float:left; border:none; }
div#container { margin-left:auto; margin-right:auto; margin-bottom:0; width:1002px; background-color:#A8CBE9; }
div#foot {      background-color:#003366;      border-color:#a8cbe9;      border-width:thin;      border-style:solid;      font-size:10px;      width:996px;      padding:0.2em;      margin-left:auto;     margin-right:auto;      text-align:center;      font-family:Arial, Helvetica, sans-serif;      font-weight:bold;      color:#FFFFFF;      height:10px; }
.floatfix { clear:both; }
I've tried removing all the floats, even, especially the ones in the nested divs/class elements; but this didn't do a thing. This leads me to wonder if this really is a float drop problem or am I missing something?
EDIT: I fail at posting code so I've removed the front bracket from all tags. Also, added a diagram to show what it's supposed to look like and what is happening in IE 8 Compatibility. The margins do not exist, they are there so you can see individual elements

I tried adjusting the images on the right -10px and had the same result. Those images were actually created with margins within the image, so everything should be flush.
I noticed, however, that even in browsers where everything aligns correctly, there seems to be a 2-3px jog between the flash image and the buttons on the right. That strange link to the bottom right of the flash image is still appearing as well, somehow having to do with the top banner image when right clicked. I tried changing the URL of that banner and the link changed as well, confirming my suspicion that they're linked. I attempted to contain that image in a fixed width div with no results. This link does not appear in other browsers, nor does it appear on any other pages that I used that code on.
Code for my banner:
<...a href="index.html"><img src="index/accuweb_c3homebannerR1a.jpg" alt="banner" border="0" class="banner"/><.../a>

Help with css float

I have a layout that I need help with please. The bright green panel is going to have a Flash file inserted but I need it to sit inside the detailsWrapper div, which needs to stretch to allow this to happen. The content is being generated through php modules and the details will vary in length, so I'm having difficulty styling this. I'm sure it's something obvious but I need help please!
Here's the link: http://www.designermagic.co.uk/hobarts/reapitDetails.php?clearcache=true&pagevars=1-bedroo m-property-for-sale-in-London-N22-hobrps-ALE090002

Your CSS code could use some tidying up. It's kind of a mess. See details below.
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. designermagic.co.uk%2Fhobarts%2FreapitDetails.php%3Fclearcache%3Dtrue%26pagevars%3D1-bedro om-property-for-sale-in-London-N22-hobrps-ALE090002
These statements are redundant.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
margin: 0;
padding: 0;
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
Try changing the above code to just this. * = the universal selector.
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
outline-style:none; /**outline is not on by default so unsure why you need this**/
More on CSS Shorthand
http://www.dustindiaz.com/css-shorthand/
And you have HTML code errors but the symbols in your document are blocking the validator from giving results.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.designermagic.co.uk%2Fhobarts %2FreapitDetails.php%3Fclearcache%3Dtrue%26pagevars%3D1-bedroom-property-for-sale-in-Londo n-N22-hobrps-ALE090002
After you fix the code errors, post back with a URL to the new page.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

CSS Float Confusion

This may seem like an incredibly stupid question but I think I
may just be overthinking things and confusing myself.
In my head, I've always had a rule about floats - if you float something, every element below it in the same parent container will jump the gap if there's room. That room would be determined by the width you give the top element.
If I want to have two columns fixed (#first & #second), I've always thought that if I give widths to both and then float the first one left, everything below it (the second div) would jump the gap if there was space. But in order to get the second div to jump up, I either have to delete its width (defeating the purpose of fixed width) or also tell it to float left.
Maybe I'm dreaming, but I thought I'd used this succussfully in the past to get two columns:
#first {width:300px; float:left}
#second {width:300px}
But now I have to delete the second's width or add float left to the second div to get it to work. Can anyone tell me what I'm missing in not understanding why the code wouldn't work? How would I rephrase my above "rule in my head" to explain it to someone else?

To make your code work properly, you'd need to do this -
#first {width:300px; float:left}
#second {width:300px; margin-left:300px;}
Without adding that margin, the second div will act as if the first div were removed from the flow, and in fact that's exactly what floating does. This causes the div#second to slide beneath div#first since it's not really there. By adding the margin, you force div#second to fall to the right of div#first, yet still be on the same horizontal line because of the float.
Alternatively, if you did this -
#first {width:300px; float:left}
#second {width:300px:float:left;}
you will accomplish the same purpose but for different reasons. In this case, because both elements are floated, they will line up horizontally like little soldiers without having to worry about wrapping.
Either way works, but circumstances may require you use one or the other. For example, to float something you should also give it a width. It may be that you don't want to do that, or can't do that for other reasons.

CSS Layout Issue

Using CSS I am attempting my first tableless page layout and
I am bumping up against a problem I cannot figure out. I am posting
this hoping that kind soul out there will take a drive by and tell
me what I'm doing wrong.
Testing with Firefox and IE6&7 for PC and Mac, Netscape
7.2 and Safari for the Mac, all seem to work. My HTML and CSS both
validated at W3C.
I initially worked out some bugs and it was working well
until I updated Netscape from 8.1 to 8.1.2. A rollover that belongs
on the farthest right is now pushed out of position and appears
below the masthead. Resulting in an additional scroll bar under the
masthead area and along the right side. My content appears below
this additional scroll bar.
You can see the page here:
http://www.voicedatacable.com/index2.html
The css is here:
http://www.voicedatacable.com/styles/main.css
To summarize, I have my div tags nested in this fashion:
<overall_page_container>
<masthead_container>
<masthead_row1 />
<masthead_row2_1 />(float: left)
<masthead_row2_2 />(float: left)
<masthead_row2_3 />(float: left)
<masthead_row2_4 />(float: left)
<masthead_row2_5 />(float: left)
</masthead_container >
<content_container />
<footer />
</overall_page_container >
I hope someone out there can tell me what I'm missing here.
Thanks in advance.

Change this -
DIV#logo {
BACKGROUND: url(images/images/logo.gif);
FLOAT: left;
MARGIN: 0px 0px 0px 70px;
WIDTH: 225px;
HEIGHT: 150px
to this -
DIV#logo {
BACKGROUND: url(images/images/logo.gif);
FLOAT: left;
MARGIN: 0px 0px 0px 70px;
WIDTH: 225px;
HEIGHT: 150px;
DISPLAY:inline;
and see what happens.
It's the IE double margin bug.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"dog n' moon" <[email protected]> wrote in
message
news:e28epu$l3o$[email protected]..
> In Safari, the two top elements are horizontally level
with each other. I
> just
> checked on Win XP and the navigation cluster is below
the logo, so the
> float is
> not working...
> URL is:
>
http://hopehouseoc.com/admission.html
>
> any help with CSS floats or a better way to set these
two elements even
> with
> each other horizontally?
>
> thanks in advance
>

CSS Layout Anomoly

I have been trying to be a very good boy recently and learn
to layout a website using CSS and layers.
I have created a test page that pretty much seems to work.
I have used a wrapper div with a background image so that the
main body column and the right navigation column both "reach" to
the bottom.
The page is here:
css-test.htm
In Opera and in Firefox it displays without problem however
in IE7 the wrapper div with the background image comes down 20 or
so pixels below the bottom banner, obviously it shouldn't come
below the bottom banner at all.
Any ideas on how to stop this would be greafully appreciated.
PD

Perhaps typical of new CSS learners, you have well
overengineered the page
and its corresponding CSS: floats everywhere, overflow
managed
inappropriately, etc!
Consider this simplified version. Note how the CSS reads from
the top of
the page down, and how I have replaced your class selectors
with ID
selectors.
http://www.murraytestsite.com/pilot.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Pilot Dave" <[email protected]> wrote in
message
news:ekqnap$kbo$[email protected]..
>I have been trying to be a very good boy recently and
learn to layout a
>website
> using CSS and layers.
>
> I have created a test page that pretty much seems to
work.
>
> I have used a wrapper div with a background image so
that the main body
> column
> and the right navigation column both "reach" to the
bottom.
>
> The page is here:
http://www.carrot.co.uk/css/css-test.htm
>
> In Opera and in Firefox it displays without problem
however in IE7 the
> wrapper
> div with the background image comes down 20 or so pixels
below the bottom
> banner, obviously it shouldn't come below the bottom
banner at all.
>
> Any ideas on how to stop this would be greafully
appreciated.
>
> PD
>

Need information on the concept of floating (Was: Floating!!????)

I can't seem to grasp this concept or technique of floating, what's the easy explanation? Assignment due very soon, I need to get this together.

Using CSS Floats and Margins
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml
Nancy O.

Confused about CSS or HTML....

Okay... I really don't know much about this stuff, so I'm sorry if this is a dumb question. I'm trying to add drop down menus to my website. When a company (dynamicdrives.com) includes codes for a specific menu that I can edit, should I use the CSS one or HTML one? In iweb, I am clicking on adding an HTML snippet and then putting in the code. So, from those, is there one that will work better in iWeb? Is there even a difference? Do I need both? Is there one that will be compatible with Firefox, IE, and more? I am having trouble getting menus to look good on IE. Thanks!

Content = HTML. Style = CSS. To achieve a 2-column layout, you need both HTML and CSS.
1) Organize your HTML content in a logical manner from top to bottom of page.
2) Style your content with CSS floats and margins to create columns.
See following links for demos and tutorials:
2-col layout
http://alt-web.com/TEMPLATES/2-col-fixed-layout.shtml
basic grid -
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
wrapping text around images -
http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml
Happy 2010!
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

CSS Styles Panel and DIV Draw tool

In Dreamweaver CS6 Creative Cloud, how do I access the CSS styles palate/panel and is there a DIV DRAW tool, or do you resort to the tracing tool to draw website layouts?

DW is not a graphics app. You cannot draw layouts on screen. You need to use CSS code to create the basic layout and HTML for your structure.
You may find it helpful to jump start your projects with one of the pre-built CSS Layouts in Dreamweaver CS6.
Go to File > New > Blank Page > HTML > Select one of the Layouts in the 3rd panel and hit the Create button. SaveAs filename.html.
Learn to use CSS floats, margins and padding to align elements.
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
Centering Pages, Images and other elements with CSS
http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html
Nancy O.

CSS Float in IE

Similar Messages

Maybe you are looking for