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">
>
<!--<center><h2>Welcome</h2></center>
> <hr/>-->
> <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;
> }
>
Similar Messages
-
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">
<!--
.H1_black {color: #000000}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 25px;
font-weight: normal;
color: #000000;
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
.headlinetxt_colour {color: #FF6600}
.style1 {color: #ff6600}
-->
</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>
<!--main body content goes here -->
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 -
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!
-JLjasonLampitt 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! -
Can someone help me with a drop float problem I am having in
the old version of internet explorer? Please see this website:
http://003a17b.netsolhost.com/kwdwebsite/index.html
The green navigation bar should be lined up with the green
bar in the logo (at the top). IE 6.0 is dropping it down lower. Can
anyone help resolve this issue? Thanks![email protected] posted in macromedia.dreamweaver
> Can someone help me with a drop float problem I am
having in the
> old version of internet explorer? Please see this
website:
>
http://003a17b.netsolhost.com/kwdwebsite/index.html
> The green navigation bar should be lined up with the
green bar in
> the logo (at
> the top). IE 6.0 is dropping it down lower. Can anyone
help
> resolve this issue? Thanks!
(My IE6 box finally went to pasture, so I'll look into
installing
multiple IEs on one of my boxes this week)
I would concentrate on creating valid code before trying to
deal with
cross-browser compatibility. You'll often find that that is
all it
takes.
Enter your URL here:
http://validator.w3.org
For instance, you have several redundant, illegal instances
of
<link href="css/KWD.css" rel="stylesheet"
type="text/css">
inside the body element.
It looks as if that might be part of a library item? If so,
take it
out.
Reply back if that doesn't do it for you.
Sidenote:
Your excessive use of META keywords may be considered Meta
tag stuffing
or spamdexing and may not be as useful as you hope. Likewise
for the
double META Description where the second seems excessive. No
links to
back it up at the moment, but you might want to look into it.
Mark A. Boyd
Keep-On-Learnin' :) -
Is this Cf or CSS causing problem?
I am on the home stretch on this job. I have this one irritating problem and I am not sure if the prob is being caused by a <cfinput> tag or a style sheet
problem. Maybe someone out there can help identify what's happening. My guess is that it is in the CSS, but pulling my hair out to find it.
You will have to go to this page: http://www.renobowls.com/leagues/leagueRegSelect.cfm and click on "Individual Reg" button.
Look at the radio buttons underneath "Step One: Individual Registration"
I cannot get these suckers to line up in a single line. Here is the code:
<div class="box2">
<table>
<tr>
<td width="100%">
Are you a returning Reno Bowls league player?
</td>
<td width="50%">
<strong>NO</strong> <cfinput type="radio" class="fleft" name="priorRBLeague" value="No" checked="no">
</td>
<td>
<strong>YES</strong><cfinput class="fleft" type="radio" name="priorRBLeague" value="Yes" checked="Yes">
</td>
</tr>
</table>
</div>
Here is the CSS:
/*box2*/
.box2{ background:#e8e8e7; width:100%;}
.box2 .indent-box-1{ padding:35px 0 0 0; }
Inherited CSS: (going backwards)
div.container { overflow:hidden; width: 100%}
then:
/*box*/
.box{ background:#fdfdfd; width:100%;}
.box .border-top {background:url(images/border_top.gif) repeat-x top;}
.box .border-bottom {background:url(images/border_bottom.gif) repeat-x bottom;}
.box .border-left {background:url(images/border_left.gif) repeat-y left;}
.box .border-right {background:url(images/border_right.gif) repeat-y right;}
.box .corner-top-left {background:url(images/corner_top_left.gif) no-repeat left top;}
.box .corner-top-right {background:url(images/corner_top_right.gif) no-repeat right top;}
.box .corner-bottom-left {background:url(images/corner_bottom_left.gif) no-repeat left bottom;}
.box .corner-bottom-right {background:url(images/corner_bottom_right.gif) no-repeat right bottom; width:100%; }
.box .indent-box{ padding:35px 35px 17px 35px; }
then:
/*T-Reg*/
#tReg { font-size:0.75em; width:100%; text-align:left;}
#tReg .indent-main{padding:0 67px 0 67px}
#tReg .title{ background:url(images/bg_title.gif) repeat-x top; text-align:center}
#tReg .title h2{ margin-bottom:5px}
#tReg .img-left{ float:left; margin:0 20px 16px 0}
#tReg .img-left1{ float:left; margin:0 20px 0 0}
#tReg .img-indent{ margin:0 0 16px 0}
#tReg .img-indent1{ margin:0 12px 6px 0}
#tReg p{ margin:0 0 17px 0}
#tReg .p{ margin:0}
#tReg .p1{ margin:0 0 17px 0; width:100%}
#tReg .p2{ margin:0 0 7px 0}
#tReg h4{color:#6d6d6d; font-size:1em; }
#tReg h5{color:#2a88d8; font-size:.916em; text-transform:uppercase; margin-bottom:5px }
#tReg h2{color:#3b3e40; font-size:1.66em; text-transform:uppercase; margin-bottom:15px; line-height:1.2em }
#tReg .h2{color:#0f2f55; font-size:1.66em; text-transform:uppercase; margin-bottom:5px }
#tReg .h2 span{color:#1e5597; text-transform:none; font-weight:normal}
#tReg .tail{ background:url(images/tail.gif) repeat-x bottom; padding-bottom:17px; margin-bottom:17px}
#tReg ul{margin:0; padding:0; list-style:none;}
#tReg ul li{background:url(images/marker.gif) center left no-repeat; background-position:1 1px; margin:0; padding-left:18px; }
#tReg ul li a{color:#6d6d6d; text-decoration:none ; line-height:2em; font-weight:bold}
#tReg ul li a:hover { text-decoration:underline; }
#tReg .indent{padding:28px 0 0 0}
#tReg .indent-1{padding:0 0 0 128px}
.txt1{ color:#6d6d6d; font-weight:bold}
.txt2{ color:#b72723; font-weight:bold}
finally:
body {font-size:100%; line-height:1em; background:url(images/bg.gif) repeat-x #03162a; position:relative;}try this:
<div class="box2">
<table>
<tr>
<td width="100%">
<table style="width:100%">
<tr>
<td><nobr>Are you a returning Reno Bowls league player?</nobr></td>
<td><strong>NO</strong></td>
<td><cfinput type="radio" class="fleft" name="priorRBLeague" value="No" checked="no"></td>
<td><strong>YES</strong><cfinput class="fleft" type="radio" name="priorRBLeague" value="Yes" checked="Yes"></td>
</tr>
</table>
</td>
</tr>
</table>
</div> -
I should start this by saying I am very new to CSS layouts,
and am self taught, so I'm probably doing something very wrong. So
far I've stuck to really simple layouts and had no problems...but
they were very simple layouts.
With the site I'm doing at the moment I have placed other
div's inside a content div, so that I can have left and right hand
content within the content div. But the left and right div's are
not pushing the content div down with their content, and I'm not
sure what else to try to get it to work.
I've tried setting the height of the content div to auto or
inherit but that doesn't work.
As you can see on the main page of the site I'm using a
background image in the content cell.
http://members.westnet.com.au/zelky/surfschoolnew/index.html
And if you look at the details page you can see what I am
trying to describe. The content div not pushing down with the left
and right content div’s contents means the background image
is just a few pixels deep under the nav div.
http://members.westnet.com.au/zelky/surfschoolnew/details.html
And my pathetic CSS/stylesheet is here:
http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
Thanks in advance and hopefully my mess isn’t’ to
hard to look at. As I said I'm a bit lost so hopefully I'm not
going to confuse anyone with my "home made" skills.When you 'float' elements on your page you effectively remove
them from
the normal flow of the document, therfore the 'content'
<div> thinks
nothing is inside it. You need to help it by 'clearing' the
floats.
There are various methods for clearing floats.
Insert a 'clearing' <br> (shown below) into your pages
code directly
AFTER the closing 'right' container tag and BEFORE the
closing 'content'
container tag.
</div><!-- end 'right' -->
<br style="clear: both;" />
</div><!-- end 'content' -->
zelky wrote:
> I should start this by saying I am very new to CSS
layouts, and am self taught,
> so I'm probably doing something very wrong. So far I've
stuck to really simple
> layouts and had no problems...but they were very simple
layouts.
>
> With the site I'm doing at the moment I have placed
other div's inside a
> content div, so that I can have left and right hand
content within the content
> div. But the left and right div's are not pushing the
content div down with
> their content, and I'm not sure what else to try to get
it to work.
>
> I've tried setting the height of the content div to auto
or inherit but that
> doesn't work.
>
> As you can see on the main page of the site I'm using a
background image in
> the content cell.
>
>
http://members.westnet.com.au/zelky/surfschoolnew/index.html
>
> And if you look at the details page you can see what I
am trying to describe.
> The content div not pushing down with the left and right
content div?s contents
> means the background image is just a few pixels deep
under the nav div.
>
>
http://members.westnet.com.au/zelky/surfschoolnew/details.html
>
> And my pathetic CSS/stylesheet is here:
>
>
http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
>
> Thanks in advance and hopefully my mess isn?t? to hard
to look at. As I said
> I'm a bit lost so hopefully I'm not going to confuse
anyone with my "home made"
> skills.
>
> -
Float problems in Dreamweaver CS3
I am having problems creating a 2-column layout to display my main page content alongside a sidebar containing a simple payment signup form.
I have set up DIVs for each... no problem. I have applied a left float property to the sidebar, but I can't get the main content to appear to the right of the sidebar - it's still beginning where the sidebar ends.
Is there something fundamental I am doing wrong?The live link is http://www.sharpeacademy.co.uk/summerschoolnew.html
Code for the page is as follows:
<!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>Sharpe Academy - Summer School 2009 - Singing, Acting, Dance, Fitness, Stage Combat</title>
<link href="css/oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColFixCtrHdr">
<div id="containerSummerSchool">
<div id="header"><img src="images/header.png" alt="Welcome to Sharpe Academy" width="1000" height="200" />
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">HOME</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
<ul>
<li><a href="history.html">Brief History</a></li>
<li><a href="mission.html">Our Mission</a></li>
<li><a href="venue.html">Venue</a></li>
<li><a href="staff.html">Staff</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">CLASSES</a>
<ul>
<li><a href="academyactors.html">Acting</a></li>
<li><a href="starlighters.html">Musical Theatre</a></li>
<li><a href="fees.html">Fees</a></li>
</ul>
</li>
<li><a href="summerschool.html">SUMMER SCHOOL</a> </li>
<li><a href="contact.html">CONTACT US</a></li>
</ul>
</div>
<p> </p>
<div id="leftSidebar">
<div id="PayPalContainer">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="PayPal" target="_blank" id="PayPal">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="6106695" />
<table>
<tr>
<td><input type="hidden" name="on0" value="Select which week" />
Select which week</td>
</tr>
<tr>
<td><select name="PayPalWeek" id="PayPalWeek">
<option value="13th - 17th July - Rotherham">13th - 17th July - Rotherham </option>
<option value="20th - 24th July - Rotherham">20th - 24th July - Rotherham </option>
<option value="3rd - 7th August - Harrow">3rd - 7th August - Harrow </option>
</select>
</td>
</tr>
<tr>
<td><input type="hidden" name="on1" value="Enter your childs name" />
Enter your childs name</td>
</tr>
<tr>
<td><input type="text" name="PayPalName" maxlength="60" id="PayPalName" /></td>
</tr>
<tr>
<td><input type="hidden" name="on2" value="Enter your childs age" />
Enter your childs age</td>
</tr>
<tr>
<td><input type="text" name="PayPalAge" maxlength="60" id="PayPalAge" /></td>
</tr>
</table>
<input type="image" src="https://www.paypal.com/en_GB/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online." />
<img alt="PayPal payment form" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1" />
</form>
</div>
</div>
<div id="summerSchoolContent">
<div class="oneColFixCtrHdr" id="textHeader">
<p><img src="images/summerSchoolType.png" alt="Welcome to Sharpe Academy" width="538" height="40" /> </p>
</div>
<h5>When is Summer School?</h5>
<p> Monday 13th – Friday 17th July – 9am-4pm - Rotherham, South Yorkshire</p>
<p> Monday 20th – Friday 24th July – 9am-4pm - Rotherham, South Yorkshire</p>
<p> Monday 3rd – Friday 7th August – 9am-4pm - Harrow, Greater London</p>
<h5> Who can attend?</h5>
<p> Anyone aged 6 to 16 who lives in the local area can attend summer school. We are always keen to see new faces. You don’t need any experience in any of the subjects as we will teach from the very beginning.</p>
<h5>Can my child come to more than one week of Summer School?</h5>
<p> Children in Rotherham may come to one or both Rotherham weeks as we will be teaching different materials both weeks. We are only doing one week in Harrow this year.</p>
<h5>Who will be teaching at Summer School 2009?</h5>
<p> Our teachers come from a variety of backgrounds. Their pictures and names can be seen on the left hand side. We have West-End performers who will be joining us to do workshops in shows including The Lion King, Chitty Chitty Bang Bang, Cats, Fiddler on the Roof, We Will Rock You and Les Miserables. We are also welcoming teachers from some of the most prestigious performing arts colleges in London including Mountview, Guildford School of Acting and Sylvia Young Stage School.</p>
<h5>Are Teachers CRB Checked?</h5>
<p> Yes, all teachers who teach at Sharpe Academy are CRB police checked. We also have a first aid trained member of staff on site at all times.</p>
<h5>How do I book? </h5>
<p> We have several ways for you to book. You can pay online by debit or credit card by clicking the PAY NOW button above which takes you through to a secure checkout through Paypal. Once payment has been received we will post you out a full registration pack to be completed. Alternatively you may wish to pay by cheque. Please download our booking form leaflet and send this along with your summer school fee to the address on the leaflet.</p>
<h5>What subjects will children learn?</h5>
<p> FITNESS SINGING MUSICAL THEATRE ACTING for the Stage </p>
<p> ACTING for Television & Film MIME JAZZ TAP BALLET </p>
<p> STAGE COMBAT AUDITION TECHNIQUE END OF WEEK SHOWCASE FOR PARENTS</p>
<h5> Where is the Rotherham Summer School being held?</h5>
<p>Rudston Prep School, 59/63 Broom Road, Rotherham, South Yorkshire S60 2SW </p>
<h5>Where is the Harrow Summer School being held?</h5>
<p>Harrow High School, Gayton Road, Harrow, Greater London HA1 2JG.</p>
<h5>How much is Summer School?</h5>
<p> Online booking: £105.00 per child for the full week – Includes a Summer School t-shirt</p>
<p> Standard booking: £120.00 per child for the full week.</p>
<h5> What do the children need to wear?</h5>
<p> Comfortable clothing must be worn (no jeans). Footwear should be trainers, dance shoes or indoor pumps.</p>
<p> Summer School T-shirts will be on sale for £10.00, or FREE if you book online.</p>
<h5> What are the T-shirt Sizes?</h5>
<div class="tshirtSizes">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="row">Order Size:</th>
<td>5–6</td>
<td>7–8</td>
<td>9–11</td>
<td>12–13</td>
<td>14–15</td>
<td>Adult S</td>
<td>Adult M</td>
<td>Adult L</td>
</tr>
<tr>
<th scope="row">Height <span class="plainType">(cm)</span>:</th>
<td>116</td>
<td>128</td>
<td>140</td>
<td>152</td>
<td>164</td>
<td>–</td>
<td>–</td>
<td>–</td>
</tr>
<tr>
<th scope="row">Chest <span class="plainType">(inches)</span>:</th>
<td>26/28</td>
<td>30</td>
<td>32</td>
<td>34</td>
<td>36</td>
<td>35/37</td>
<td>38/40</td>
<td>41/43</td>
</tr>
</table>
</div>
</div>
<div class="push"></div>
<!-- end #container --></div>
<div id="footer">
<div class="oneColFixCtrHdr" id="copyright">
<p>
<!-- end #footer -->
© Copyright Sharpe Academy 2009. All rights reserved. Daniel Sharpe trading as Sharpe Academy.</p>
</div>
<div class="oneColFixCtrHdr" id="links">
<p>| <a href="summerschool.html">Home</a> | <a href="starlighters.html">Musical Theatre</a> | <a href="academyactors.html">Acting for Stage & Screen</a><a href="http://www.shapeacademy.co.uk/" target="_blank"></a> | <a href="contact.html">Contact Us</a> |</p>
</div>
</div>
<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=4366318;
var sc_invisible=1;
var sc_partition=55;
var sc_click_stat=1;
var sc_security="12b1dd37";
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
class="statcounter"><a title="web analytics"
href="http://www.statcounter.com/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/4366318/0/12b1dd37/1/"
alt="web analytics" ></a></div></noscript>
<!-- End of StatCounter Code -->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9304732-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html> -
DW CS3 CSS template problems in EI6
I'm new to CSS and DW, so I tried starting with DW's new CSS
layouts. After working on this off and on for about a year, I
finally got the design to look okay in both FF 2 and IE 7. Wouldn't
you know my client has IE 6 and the layout breaks in 6. In 6 the
middle section, including the banner image, float drop down to the
bottom. If I make the width on #container2 to be 956 pixels instead
of 950, then 6 lets the middle section float up, but all browsers
have a background colored gap between the banner images and one or
more of the sidebar images. I'm ready to pull my hair out!
Here's the link to the page set to work for IE 7 and FF and
to break in 6. The entire site, of course, has many more pages but
this just has the index because I'm experimenting.
http://www.montanahorsesales.com/shf2/
and here's the style sheet that has the problem.
http://www.montanahorsesales.com/shf2/styles/thrColFix.css
The reason I added the #container2 is to get the cream
colored background to show in both IE7 and FF. One or the other was
giving me the dark green background in the main content and the
other was giving me the cream colored main content background like
it was supposed to.
Any suggestions? Is there a quick and easy way to fix this so
it works in all browsers? Or a hack to fix it for IE 6? I can live
without it working in any IE before 6, but I need 6 to work.
In general, it is a mistake to start with DW's included CSS
layouts? I thought it would be such a smart thing to do but now I'm
not so sure!Cleo3 wrote:
> Any suggestions? Is there a quick and easy way to fix
this so it works in all
> browsers? Or a hack to fix it for IE 6? I can live
without it working in any
> IE before 6, but I need 6 to work.
Hi,
you could try replacing yours for mine...
.leftMargin198 {
margin: 0px;
padding: 0px;
height: 175px;
width: 554px;
float: left;
HTH
chin chin
Sinclair -
Hi everyone, I hope someone can help me out with this
problem.
My website displays fine in all the browser that I've tested,
but I've restenly noticed that areas are rendered wrong in the
Google Cache snapshot?
Example:
My Site:
www.dcypher.co.uk
Click
to view Google Cache Snapshot
This is the CSS code I have for the 2 column's in the body
that are displaying incorrectly:
#main {
background-image: url(images/mainBackground.gif);
background-repeat:repeat-y;
background-color: #666666;
width: 700px;
height: 100%;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
overflow: auto;
#mainText {
width: 434px;
margin: 0px;
padding-top: 40px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
float:left;
#mainNav {
width: 156px;
margin: 0px;
padding-top: 40px;
padding-right: 25px;
padding-bottom: 40px;
padding-left: 25px;
float:left;
I hope someone can shed some light on this for me as i'm
completely stumped.
Thanks in advance.
WebboYes...the pages from the book display perfectly in dw8, but
not in DWcs3.
I found that by commenting out the "clear:left;" under "#nav"
the page displays properly in DWcs3, too. That leaves open the
question of "why".
Thanks. -
Hi
I am building a site for a client that has had the page
designed by a graphic designer and she is being EXCEPTIONALLY picky
about the font size, spacing and many other things. The problem I
have is, that on some browsers, the space between the text and the
border at the top of the container, is double what it is in IE6 and
IE7. Can anyone tell me how I can fix this so that it has the same
amount of spacing in all browsers.
Many thanks
Julie
CSS code:
/* CSS Document */
/*formatting divs*/
body a p td th div blockquote ul ol dl{
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color:#999999;
margin: 0;
body { margin: 0px; padding: 0px; background:#262425}
h1 {font-family: Arial, Helvetica, sans-serif;
font-size:36px}
a:link {
text-decoration:underline;
color: #000000;
a:visited {color:#666666; text-decoration:underline;}
a:hover {color:#ff9c04; text-decoration:underline;}
/*layout divs*/
#wrapper {width: 820px; position:relative; margin:0 auto;
top:15%}
#header {clear:both; height:50px; width:820px}
#leftcol {
width: 108px;
float:left;
padding-right:12px;
text-align: right;
#container {margin:0; padding:0; float:right; width:695px}
#content {background-color:#FFFFFF; width: 328px; padding: 0
10px 0 10px; height: 500px; float:left; color: #666666; font-size:
14px; overflow: hidden;}
#rightcol {width: 347px; float:right}
#footer {clear: both}
#text {padding: 0 10px 10px 0; height: 370px; overflow:auto}
/*menu*/
#leftcol ul {}
#leftcol li {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
list-style:none;
.logo {
margin-right: 0px;
margin-left: 0px;
padding: 23px 0px 12px 0;}
/*design elements*/
.scroll {
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #C2A2DA;
scrollbar-highlight-color: #C2A2DA ;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#C2A2DA}Designing for the web is NOT the same as designing for print.
Graphic
designers do not understand that there are too many variables
you can't
control such as screen size, browsers, and the default text
size used by
visitors. Firefox, Opera & Safari will render pages
differently than IE. In
some cases, you can use IE hacks or CSS tricks to get it
closer to what you
want. Or you could make one big graphic or image map but I do
not recommend
this as it will impact your site's search engine rankings
& user
accessibility.
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"ukjooles" <[email protected]> wrote in
message
news:[email protected]...
> Hi
>
> I am building a site for a client that has had the page
designed by a
graphic
> designer and she is being EXCEPTIONALLY picky about the
font size, spacing
and
> many other things. The problem I have is, that on some
browsers, the
space
> between the text and the border at the top of the
container, is double
what it
> is in IE6 and IE7. Can anyone tell me how I can fix this
so that it has
the
> same amount of spacing in all browsers.
>
> Many thanks
> Julie
>
> CSS code:
>
> /* CSS Document */
>
>
> /*formatting divs*/
>
> body a p td th div blockquote ul ol dl{
> font-family: "Times New Roman", Times, serif;
> font-size: 14px;
> color:#999999;
> margin: 0;
> }
>
> body { margin: 0px; padding: 0px; background:#262425}
>
> h1 {font-family: Arial, Helvetica, sans-serif;
font-size:36px}
>
> a:link {
> text-decoration:underline;
> color: #000000;
> }
> a:visited {color:#666666; text-decoration:underline;}
>
> a:hover {color:#ff9c04; text-decoration:underline;}
>
>
> /*layout divs*/
>
> #wrapper {width: 820px; position:relative; margin:0
auto; top:15%}
>
> #header {clear:both; height:50px; width:820px}
>
> #leftcol {
> width: 108px;
> float:left;
> padding-right:12px;
> text-align: right;
> }
>
> #container {margin:0; padding:0; float:right;
width:695px}
>
> #content {background-color:#FFFFFF; width: 328px;
padding: 0 10px 0 10px;
> height: 500px; float:left; color: #666666; font-size:
14px; overflow:
hidden;}
>
> #rightcol {width: 347px; float:right}
>
> #footer {clear: both}
>
> #text {padding: 0 10px 10px 0; height: 370px;
overflow:auto}
>
>
> /*menu*/
>
> #leftcol ul {}
> #leftcol li {
> font-family:Verdana, Arial, Helvetica, sans-serif;
> font-size: 11px;
> color: #FFFFFF;
> list-style:none;
> }
>
> .logo {
> margin-right: 0px;
> margin-left: 0px;
> padding: 23px 0px 12px 0;}
>
>
> /*design elements*/
>
> .scroll {
> scrollbar-face-color: #ffffff;
> scrollbar-shadow-color: #C2A2DA;
> scrollbar-highlight-color: #C2A2DA ;
> scrollbar-3dlight-color: #ffffff;
> scrollbar-darkshadow-color:#ffffff;
> scrollbar-track-color:#FFFFFF;
> scrollbar-arrow-color:#C2A2DA}
>
> -
i have a little problem in css and i dont know how to fix it...
html
<article class="content">
<h1>header text</h1>
<aside>
<p>texto</p>
<p>alala</p>
<p>lalala</p>
<p>alala</p>
<p>alala</p>
<p>lalal</p>
<p>lala</p>
<p>lala</p>
</aside>
<section>
<p>paragraph text</p>
<p>another p text</p>
</section>
</article>
yellow background is aside , inside container and next to section
aside {
float: left;
width: 180px;
background: #EADCAE;
height: auto;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
section {
margin-top:15px;
margin-bottom:15px;
width: auto;
display:block;
.container {
width:auto;
max-width:960px;
padding: 10px;
top: 0px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
obviously i want the aside next to the section be inside the container.
i do not use width in pixels bacuse other pages do not have aside and its a liquid container
so.. i don´t know where im wrongBased on what you are asking we do not have enough of the code to solve your problem. You are saying that the yellow "aside" should be within the grey section. But the grey section is either not in the "container" class or the container class is also defined somewhere else on your stylesheet with the background which we cannot see.
There is nothing wrong with the code you have posted. We are going to have to see more of what's around the "article" to solve this problem. I'd also recommend running your site through the validator at this point: http://validator.w3.org/ -
Background color and float problems
Hello all,
I am having a problem with the background color and the left
float for a navigation sidebar (also with the background color for
the footer). The body color is set to gray, and the main page is
centered with a white background. I set up the pages using mostly
CSS, with a few tables where they seemed necessary. I set up the
navigation side bar as a div with a green background and a left
float. The footer is set up as a div with a green background. All
text is aligned left.
When I preview in Safari, everything looks as expected.
In Firefox and IE5: The background color of the navigation
sidebar has white showing up behind the type that are not links
(e.g., mailing address and subheads). The div does not float all
the way to the left edge of the page. The background color of the
footer should be green but shows up as white. I validated the code
in DW, and it reports no problems (at least, it checked out after I
made a few corrections).
I am not that concerned about the background color for the
footer -- it is either all there (in Safari) or not there at all
(in Firefox and IE). But I would like to see if I can make it show
up. For the navigation sidebar, would putting it in a table cell
make it work correctly in Firefox and IE?
Regarding the left float issue for the nav sidebar IE5: At
the top of the page, my logo banner (it's placed in a div) shifted
to the right (in IE only). When I added a left float to the banner,
the banner lines up fine with the rest of the page, but a white
margin appears along the left side of the entire page.
None of my pages are uploaded to a web host yet. This is my
first website. I am working in DW8 on a Mac.
Thanks in advance,
Kathy (Daylilybud)Mista,
Here is my home page based on the template I sent previously.
Thanks in advance!
Kathy (Daylilybud)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Loon Song Gardens: Home Page</title>
<link href="externalcss/informationcss.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a {
font-weight: bold;
-->
</style></head>
<body>
<div id="container">
<div id="banner"><a name="topofpage"
id="topofpage"></a><img
src="graphics/thumbnailsheader/lsgheadergraphic_760x110.jpg" alt=""
width="760" height="110" />
<div id="heading"><img
src="graphics/thumbnailsheader/hotcolorstrip760.jpg" alt=""
width="760" height="76" /></div>
<div id="navsidebar">
<p class="navsidebarnormal">Loon Song Gardens,
LLC<br />
10910 109th Ave N<br />
Champlin MN 55316<br />
763.422.0015</p>
<ul class="ulnavsidebar">
<li class="ulnavsidebarli"><a
href="../donotuse/indextest4.html">Homepage</a></li>
<li class="ulnavsidebarli"><a
href="about_loonsonggardens/aboutus.html">About
Us</a></li>
<li class="ulnavsidebarli"><a
href="about_loonsonggardens/our_daylilies/aboutourintroductions.html">Our
Introductions</a></li>
<li class="ulnavsidebarli">Seedlings</li>
<li class="ulnavsidebarli">Photo Gallery</li>
<li class="ulnavsidebarli"><a
href="pricelist2008/pricelist2008ab2.html">2008 Price
List</a></li>
<li class="ulnavsidebarli"><a
href="pricelist2008/lsgorderform2008website.pdf">Order Form
(PDF)</a></li>
<li class="ulnavsidebarli"><a
href="about_loonsonggardens/shippingandterms.html">Shipping and
Terms</a></li>
<li class="ulnavsidebarli"><a
href="about_loonsonggardens/visitus.html">Visit
Us</a></li>
<li class="ulnavsidebarli"><a
href="mailto:[email protected]">Email Us
</a></li>
</ul>
<p> <span class="navsubheadbold">ABOUT
DAYLILIES</span> </p>
<ul class="ulnavsidebar">
<li class="ulnavsidebarli"><a
href="about_daylilies/howtoplant.html"
class="ulnavsidebarli">How to Plant</a></li>
<li class="ulnavsidebarli"><a
href="about_daylilies/growingtips.html"
class="ulnavsidebarli">Growing Tips</a></li>
<li class="ulnavsidebarli"><a
href="about_daylilies/howtodivideadaylily.html"
class="ulnavsidebarli">How to Divide</a></li>
<li class="ulnavsidebarli"><a
href="about_daylilies/moreaboutdaylilies.html"
class="ulnavsidebarli">More About Daylilies</a></li>
</ul>
<p> <span class="navsubheadbold">OTHER
LINKS</span> </p>
<ul class="ulnavsidebar">
<li class="ulnavsidebarli"><a href="
http://www.daylilies.org"
class="ulnavsidebarli">American Hemerocallis <br />
Society (AHS)</a></li>
<li class="ulnavsidebarli"><a href="
http://www.daylilies.org/ENews.html"
class="ulnavsidebarli">AHS Daylily E-News <br />
(FREE SUBSCRIPTION) </a></li>
</ul>
</div>
<div id ="content">
<h1>Welcome to Loon Song Gardens! </h1>
<ul>
<li class="contentli">We specialize in northern-hardy
daylilies (<em>Hemerocallis</em>).</li>
<li class="contentli">Our daylilies are field
grown.</li>
<li class="contentli">We offer competitive
prices.</li>
<li class="contentli">Loon Song Gardens, LLC, is a
licensed and inspected nursery.</li>
<li class="contentli">We are an American Hemerocallis
Society Display Garden. </li>
<li class="contentli">Visitors are welcome by
appointment.</li>
</ul>
<p>Loon Song Gardens is a specialty daylily nursery
and the home of Mike and Kathy Lamb in Champlin, Minnesota, USDA
hardiness zone 4. We grow over 1,000 named daylily cultivars in a
wide range of colors, sizes, and forms, from classics to cutting
edge. If you are looking for northern-hardy daylilies, check with
us! We will gladly share our growing experiences with you so you
may have the best possible success.Kathy hybridizes daylilies and
has introduced four daylily cultivars to date. For details, see
<a
href="about_daylilies/about_loonsonggardens/our_daylilies/ourintroductionsmain.html">Our
Introductions </a> and <a
href="about_daylilies/about_loonsonggardens/our_daylilies/seedlingsandfutures.html">Seedl ings.</a></p>
<h2>Are you new to the world of daylilies? </h2>
<p>Learn more about daylilies! Use the links in the
left sidebar to find answers to your questions. Check back for
updates. If you have questions, send us an email, and we will try
to help.</p>
<h2>To place your order</h2>
<p class="contentp">Use our on-line <a
href="about_daylilies/pricelist2008/pricelist2008v215ab.htm">2008
Price List </a> to make your selections. We are a small
nursery and quantities are limited, so it is best to confirm your
order via email.</p>
<p class="contentp">To place your order, print the
<a
href="about_daylilies/pricelist2008/lsgorderform2008website.pdf">Order
Form (PDF)</a>, fill it in, enclose payment by check or money
order (payable to Loon Song Gardens, LLC), and mail to:</p>
<blockquote>
<p class="contentp"> Loon Song Gardens<br />
10910 109th Ave N <br />
Champlin MN 55316</p>
</blockquote>
<p>We ship at least a double-fan size plant unless
otherwise noted in our listings, we include a bonus for orders of
at least $35, and we guarantee that our plants are true to
name.</p>
<h2>Visit Loon Song Gardens</h2>
<p>Loon Song Gardens is an official American
Hemerocallis Society (AHS) Daylily Display Garden, open by
appointment. If you will be in the Minneapolis area and would like
to stop by, please contact us to schedule a time. For details,
click on <a
href="about_daylilies/about_loonsonggardens/visitloonsonggardens.html">Visit
Us</a>. </p>
<h2>Join the American Hemerocallis Society
(AHS)</h2>
<p>The AHS website includes lots of great daylily
information, so be sure to take a look. </p>
<p>Join AHS today and take advantage of the voucher
program! New AHS members receive a voucher good for at least $25.00
toward daylilies from participating vendors (a minimum purchase may
apply). To join AHS, go directly to <a href="
http://www.daylilies.org/AHSmemb.html">AHS
Membership</a>.</p>
<p>Kathy is currently on the AHS Board of Directors as
Chair of Publicity and Media Relations. She produces <em>AHS
Daylily E-News,</em> an e-newsletter free for AHS members and
non-members alike. To subscribe, click on <a href="
http://www.daylilies.org/ENews.html">AHS
Daylily E-News</a>. </p>
</div>
<div id="topofpage"><a href="#topofpage">Top of
Page</a></div>
</div>
<div id="footer"><!-- #BeginLibraryItem
"/Library/footer1.lbi" -->
<p class="footer">© 2008 Loon Song Gardens,
LLC. All rights reserved. | Loon Song Gardens, LLC | 10910 109th
Avenue North | Champlin MN 55316<br />
<a href="mailto:[email protected]">Email
us</a>| | 763.422.0015 | Fax 763.422.0131 | This page was
last updated
<!-- #BeginDate format:Am1 -->March 30, 2008<!--
#EndDate -->
</p>
<!-- #EndLibraryItem --></div>
</div>
</body>
</html> -
Annoying CSS align problem.
Before anything, an image I made to explain:
I'm just learning CSS pretty much by having a play, then I'll google anything I get stuck with but can't find an answer for this.
Sorry the code is on another computer so any syntax errors please ignore, I know it's not a syntax problem by the way I just don't know what to do.
OK, so as you can see where the white text is, thats where I want to type. I could put an AP div in there but know that both bad practice and wont be fluid/liquid.
I have tried setting the image as a BG, centering it, adding another div and changing the left-margin to the appropriate amt then going down with the space bar but this brings the image down with it.
I've tried floating an extra div
I've had extra divs in and out of the div with the background in.
I've tried changing the Z-index of them both, still same problem.
I'm sure it's simple to some but can't think what to go with!Start with a basic, pre-built 2-col layout. If you want text superimposed on images, you'll need to put those images in the division's background.
EXAMPLE - (view page source to see the HTML and CSS code)
http://alt-web.com/TEMPLATES/2-col-fixed-layout.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
Please help with column float problem in IE8
Hi there,
Sorry to be so pushy - but I am desperate for help!!
Having serious problems with my site in some PC's showing Internet Explorer 8. My right column floated right is moving down the page underneath the left column..
It shows fine on IE8 on my PC - however on my clients PC (vista with IE8) it is showing up as mentioned above. Is there a fix for this.
Here is my link http://www.dooks.com/pgs/welcome.html
The css is all there! If you need anything please let me know as I need to get this sorted - I have had serious issues with this site that I have never had before with other sites and am starting to think there is a bug in my software. I redid the index page and this one page (linked above) to see what my problems are - so help with query v appreciated.
Many thanks,
KarenLawrence_Cramer wrote:
A point to keep in mind is that IE8 is still in Beta.
Not anymore.
http://www.microsoft.com/Presspass/press/2009/mar09/03-18IE8AvailablePR.mspx
"REDMOND, Wash. — March 18, 2009 — Today Microsoft Corp. announced the availability of Windows Internet Explorer 8, the new Web browser that offers..."
Mark A. Boyd
Keep-On-Learnin' :-) -
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.
Maybe you are looking for
-
Windows 7 on Mac 10.6 cannot connect to wireless router
We have just installed Windows 7 on our new MacBook; it is partitioned, obviously; and we can't connect to the internet. We have a wireless router (and are using ATT, if that makes a difference), which works fine for the Mac side of things. We just h
-
Why keyboard light doesn't work after HDD replacement?
Hello, I upgradet my MBP with Momentus TX 750 and now my keyboard light doens't work. What can I do to fix it? Best Regards Pawel
-
I have been lent a ipad and really hate it how do I delete all my info from it before giving it back.
-
Renaming a file in a filechooser
renaming a file in a filechooser - Single click or right click on a folder of a JFileChooser allows you to edit the new file name ina textfield. When the focus is lost from the text field the folder name is changed to the older one. But after editing
-
Have to sign in all the time wont stay signed in for two weeks as selected
when i go to e-print center I have to sign in even tho i have selected keep me signed in for two weeks This question was solved. View Solution.