OT: CSS TR float

Guten Morgen WG,
Habt Ihr zufällig einen Tip wie ich den IE (6+7) dazu
bringen kann die
CSS Anweisung tr{float: left;} zu akzeptieren?
Will da einen schnellen GUI Prototypen basteln und da
wäre das schon
super praktisch.... im FF und Opera gehts widermal ohne
Probleme.
lg
Wen*kaffeanbiet*zel

Franz Marksteiner schrieb:
> Wenzel Wondra <[email protected]> wrote:
>> Guten Morgen WG,
>>
>> Habt Ihr zufällig einen Tip wie ich den IE
(6+7) dazu bringen kann die
>> CSS Anweisung tr{float: left;} zu akzeptieren?
>>
>> Will da einen schnellen GUI Prototypen basteln und
da wäre das schon
>> super praktisch.... im FF und Opera gehts widermal
ohne Probleme.
>
> Was genau soll passieren? Sollen die Zeilen
nebeneinandern sitzen? ;-)
Jupp, ist ein kleiner "Hack" aber was solls :)
ciao
wewo

Similar Messages

I need help with CSS and floating

Okay, I know I need to get up on CSS and get rid of tables in
my sites.
However, I'm running up against a problem, and after banging
my head
against it for a while, I realize I need help. I've stripped
this down
so as to only show the area where I'm having difficulty.
What I want is a page that has everything down the center,
taking up no
more than 750 pixels and no more than 550 pixels of width. No
problem there.
After the header and the top content, I'd like to have two
"columns",
each in it's own separately-colored box. I would like the
right-side
column/box to be a static size, while the left-side
column/box sizes
dynamically.
Where I'm having problems is that when one column is boxed,
it's fine,
but whenever I wrap each column in its own box, the
fixed-size box
either jumps below or above the other box (depending on which
one has
been floated and which order the div's appear in the code).
Here are the links:
CSS:
http://www.afice.org/stylesheet/floatmestyles.css
ex 1:
http://www.afice.org/floatme1.html
ex 2:
http://www.afice.org/floatme2.html
Before sending, I took a look again, just to see if I was
missing
anything. I did notice that it doesn't seem to be that the
box is
jumping down so much as it is that it's getting written over.
Anyway, sorry for the long-winded explanation. I hope I've
managed to
explain what I'm trying to do well enough that someone can
tell me where
I'm going wrong.
Thanks,
--Kevin

Do you want something like this:
http://www.pmob.co.uk/temp/spointfooter.htm
You will need to look at the code to see how it was done.
Otherwise, there are different examples here on Pauls' site:
http://www.pmob.co.uk/temp/3colfixedtest_4.htm
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.perrelink.com.au
- Web Dev
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.adobe.com/devnet/dreamweaver/css.html
"Kevin D-R" <[email protected]> wrote in
message
news:[email protected]...
> Okay, I know I need to get up on CSS and get rid of
tables in my sites.
> However, I'm running up against a problem, and after
banging my head
> against it for a while, I realize I need help. I've
stripped this down so
> as to only show the area where I'm having difficulty.
>
> What I want is a page that has everything down the
center, taking up no
> more than 750 pixels and no more than 550 pixels of
width. No problem
> there.
>
> After the header and the top content, I'd like to have
two "columns", each
> in it's own separately-colored box. I would like the
right-side column/box
> to be a static size, while the left-side column/box
sizes dynamically.
>
> Where I'm having problems is that when one column is
boxed, it's fine, but
> whenever I wrap each column in its own box, the
fixed-size box either
> jumps below or above the other box (depending on which
one has been
> floated and which order the div's appear in the code).
>
> Here are the links:
>
> CSS:
http://www.afice.org/stylesheet/floatmestyles.css
>
> ex 1:
http://www.afice.org/floatme1.html
>
> ex 2:
http://www.afice.org/floatme2.html
>
> Before sending, I took a look again, just to see if I
was missing
> anything. I did notice that it doesn't seem to be that
the box is jumping
> down so much as it is that it's getting written over.
>
> Anyway, sorry for the long-winded explanation. I hope
I've managed to
> explain what I'm trying to do well enough that someone
can tell me where
> I'm going wrong.
>
> Thanks,
>
> --Kevin

CSS: img {Float: Left; } gives strange results in Firefox

Hi, I’m having trouble aligning some text to the right
of an image. It looks fine in IE6 but the entire page goes crazy in
Firefox. Here is the link:
http://www.option-price.com/test/index.php
I already have a few pages in place and I just wanted to add
a contact link to the right above the main navigation. Here are the
main pages:
http://www.option-price.com/index.php
The thing is…I could probably do it by creating a
nesting div around the logo div and then another div inside for the
new link (and float to right), but I was trying to cut down on
code.
Can I get this to work using img float in FireFox?
Many thanks.

petertyler wrote:
> Hi, I?m having trouble aligning some text to the right
of an image. It looks
> fine in IE6 but the entire page goes crazy in Firefox.
Here is the link:
>
>
http://www.option-price.com/test/index.php
>
> I already have a few pages in place and I just wanted to
add a contact link to
> the right above the main navigation. Here are the main
pages:
>
>
http://www.option-price.com/index.php
>
> The thing is?I could probably do it by creating a
nesting div around the logo
> div and then another div inside for the new link (and
float to right), but I
> was trying to cut down on code.
>
> Can I get this to work using img float in FireFox?
>
> Many thanks.
>
You would have to float the image in the logo <div>
left. Add another
<div> inside the logo <div> and float that right,
as below.
Html code:
<div id="logo"><img src="index_files/logo.jpg"
alt="Option-Price.com"><div
id="logoRight">Contact</div>
<br style="clear:both;" /></div>
Css:
#logo {
margin: 0px 0px 0px 100px;
padding: 0px;
width: 600px; /* YOU NEED A WIDTH */
#logo img {
float: left;
#logoRight {
float: right;
width: 200px;
text-align: right;
padding-top: 45px;
A simpler method would be to use an absolutely positioned
layer. I can't
see that anything moves on the site which would'nt warrant
the use of an
ap layer in the position you require it.

HTML Email - Will an inline-coded CSS image float work?

Best guesses are welcome.
Many thanks for your counsel.

Oddly enough, when creating HTML emails, you WANT to use inline styled Tables or image maps instead of floats.
Mail Chimp and iContact have some excellent templates and tutorials to help you get started with HTML email campaigns.
http://www.mailchimp.com/resources/
http://www.icontact.com/home/index2
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

CSS and floating

This is my layout:
Layout
This is how I have it sliced:
Sliced
My div code is set like this (Without the div tag):
wrapper
-header
-navbar
----innerwrapper
--------sidebar
--------sidebar_footer
--------content
--------content_footer
So wrapper contains everything, and sidebar/content can also
be manipulated through innerwrapper. What I'm trying to do, and
have failed at horribly for the past few hours, it float a
background for links that repeats-x to the left, and keep content
centered in the middle. After that, I have the footers for both the
link sidebar and the main content that I need to line up with the
other lines. I read a tutorial that said to achieve this, you have
to float the innerwrapper? I got my code layout from the tutorial,
which the part I'm following can be found
here
Any help is appreciated. =]

Screenshots are of no use. Please upload the page and post a
link so we can
see the code.
Walt
"Bryantos" <[email protected]> wrote in
message
news:fthnb8$slh$[email protected]..
> This is my layout:
>
http://img2.putfile.com/thumb/4/9808425646.jpg
>
> This is how I have it sliced:
>
http://img2.putfile.com/thumb/4/9902113387.jpg
>
> My div code is set like this (Without the div tag):
> wrapper
> -header
> -navbar
> ----innerwrapper
> --------sidebar
> --------sidebar_footer
> --------content
> --------content_footer
>
> So wrapper contains everything, and sidebar/content can
also be
> manipulated
> through innerwrapper. What I'm trying to do, and have
failed at horribly
> for
> the past few hours, it float a background for links that
repeats-x to the
> left,
> and keep content centered in the middle. After that, I
have the footers
> for
> both the link sidebar and the main content that I need
to line up with the
> other lines. I read a tutorial that said to achieve
this, you have to
> float the
> innerwrapper? I got my code layout from the tutorial,
which the part I'm
> following can be found
>
http://http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt3_
> 07.html.
>
> Any help is appreciated. =]
>

CSS rounded corner problem

Another question regarding my site which I'm working on.
I have used a tutorial on a css corners website and put the code on the tutorial on my site to test it out.
The url is http://www.lindendesign.co.uk/test/templates/header2.html
In the bit under my navigation menu, there is block with the rounded corners, which appears correctly.
I have added the exact same code further down, but in the content div, but it appears incorrect.
Does anyone know why this is happening?
Also, if anyone could help with the gap between web hosting header (with the green background), and the bit below it (with the borders on the side), that would be great too.
I've tried everything and I'm really struggling so would really appreciate any help.

Just to clarify, CSS won't round off the corners on images. CSS will produce rounded borders around the images.
CSS:
img {
float: left;
margin: 45px;
border: 2px solid #999;
padding: 25px;
background: #FFF;
/**ROUNDED BORDERS FOR MOZILLA,
WEBKIT, LINUX, IE9, OPERA**/
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
-khtml-border-radius: 16px;
-ms-border-radius: 16px;
border-radius: 16px;
HTML:
<img src="some-image.jpg" width="100" height="100" />
<img src="some-image.jpg" width="100" height="100" />
<img src="some-image.jpg" width="100" height="100" />
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

CSS Propblem with table

Can anyone please help with this issue I have with a table
cell I want it to have a style of 5 I abply it but the cell does
not shrink in height sizeIt shows it as shrunk in dreamweaver but
as soon as you open it in ie it looks different, tried to create a
css rule but still doesn't work.
Please help joel

What is "a style of 5"?
"griffij76" <[email protected]> wrote in
message
news:[email protected]...
> Can anyone please help with this issue I have with a
table cell I want it
to
> have a style of 5 I abply it but the cell does not
shrink in height sizeIt
> shows it as shrunk in dreamweaver but as soon as you
open it in ie it
looks
> different, tried to create a css rule but still doesn't
work.
>
> Please help joel
>
> <!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=iso-8859-1"
/>
> <title>Power Clean: Index home page</title>
> <script type="text/JavaScript">
> 
> </script>
> <style type="text/css">
>
> .imgbefore {
> float: left;
> padding: 6px 10px 6px 0px;
> }
> -->
>
> .imgafter {
> float: right;
> padding: 6px 10px 6px 0px;
> }td img {display: block;}
> body,td,th {
> color: #FFFFFF;
> height: 5px;
> }
> body {
> background-color: #CCCCCC;
> }
> .style3 {font-family: Arial, Helvetica, sans-serif;
font-weight: bold; }
> a:link {
> color: #FFFFFF;
> text-decoration: none;
> }
> a:visited {
> text-decoration: none;
> color: #FFFFFF;
> }
> a:hover {
> text-decoration: none;
> }
> a:active {
> text-decoration: none;
> color: #FFFFFF;
> }
> .style5 {
> color: #696099;
> font-size: 9px;
> }
> .style6 {color: #0000FF}
> -->
> </style>
> </head>
>
> <body>
> <table width="100%" height="100%" border=0
align="center" cellpadding=25
> cellspacing=25>
> <tbody>
> <tr>
> <td height="757" valign=center><div
align=center>
> <table bordercolor=#efefef cellspacing=25
cellpadding=25
width=775
> bgcolor=#ffffff border=0>
> <tbody>
> <tr>
> <td>
> <table cellspacing=0 cellpadding=0 width=775
align=center
> border=0>
> <tbody>
> <tr>
> <td valign=top width=775 height=104><img
> src="Images/company_logo.png"
> width=775 height=150 border="0" usemap="#Map"
/></td>
> </tr>
> </tbody>
> </table>
> <table cellspacing=0 cellpadding=0 width=775
align=center
> border=0>
> <tbody>
> <tr>
> <td height=20> </td>
> </tr>
> <tr>
> <td class=Home_Text> </td>
> </tr>
> </tbody>
> </table>
> <table cellspacing=0 cellpadding=0 width=775
align=center
> border=0>
> <tbody>
> <tr>
> <td><div align=center>
> <table cellspacing=0 cellpadding=0
width="100%"
> border=0>
> <tbody>
> <tr>
> <td height=40><table width="100%"
> border="0">
> <tr>
> <td><div align="center"><img
> src="Images/welcome_picture.png" width="359"
height="295" alt=""
/></div></td>
> </tr>
> </table></td>
> </tr>
> </tbody>
> </table>
> </div></td>
> </tr>
> </tbody>
> </table>
> <table cellspacing=0 cellpadding=0 width=775
align=center
> border=0>
> <tbody>
> <tr>
> <td> </td>
> </tr>
> </tbody>
> </table>
> <table cellspacing=0 cellpadding=0 width=775
align=center
> border=0>
> <tbody>
> <tr>
> <td height=33><table cellspacing=0
cellpadding=0
> width=775 align=center
> border=0>
> <tbody>
> <tr>
> <td
>
> height=33 align="center" valign="top"><table
> cellspacing=0 cellpadding=0 width=775 border=0>
> <tbody>
> <tr valign=bottom>
> <td width=155 height=33
> bgcolor="#44387F"> </td>
> <td width=155 valign="middle"
> bgcolor="#44387F"><div align="center"
class="style3"><a
>
href="Index.htm">Home</a></div></td>
> <td width=155 valign="middle"
> bgcolor="#44387F"><div align="center"
class="style3"><a
>
href="Services.htm">Services</a></div></td>
> <td width=155 valign="middle"
> bgcolor="#44387F"><div align="center"
class="style3"><a
> href="ContactUs.htm">Contact Us
</a></div></td>
> <td width=155
> bgcolor="#44387F"> </td>
> </tr>
> <tr valign=bottom
bgcolor=#e6e6ff>
> <td height=14 colspan="5"><div
> align=center><font
> face="Arial, Helvetica, sans-serif"
> color=#44387f#
> size=1><img src="Images/Copyright.png"
> width="775" height="31" /><br />
> </font></div></td>
> </tr>
> <tr valign=bottom bgcolor=#e6e6ff
> class="style5">
> <td height=5 colspan="5"
> align="center" valign="top"><div align="center"
class="style5">Copyright
> © 2006 </div></td>
> </tr>
> <tr valign=bottom bgcolor=#cccccc
> class="style3">
> <td height=4 colspan="5"
> align="center" valign="top" class="style5
> "> </td>
> </tr>
> </tbody>
> </table></td>
> </tr>
> </tbody>
> </table></td>
> </tr>
> </tbody>
> </table></td>
> </tr>
> </tbody>
> </table>
> </div></td>
> </tr>
> </tbody>
> </table>
>
>
>
> <map name="Map" id="Map"><area shape="rect"
coords="360,129,768,142"
> href="mailto
[email protected]" />
> </map></body>
> </html>
>

Is there a way to remove unused CSS rules

Can I scan my style sheets to remove unwanted rules? As I
develop a site and fiddle with my CSS I realise there are a few
bits and pieces that become redundant. Can DW find them for me and
remove them? In my defence, I try hard not to write sloppy code but
it's a consequence of riding the learning curve!
Thanks
Martin

>In my defence, I try hard
> not to write sloppy code but it's a consequence of
riding the learning
> curve!
I doubt you need a defense (I'm American :-)). I suspect most
if not all
here have a few unused CSS rules floating around.
Walt
"martcol" <[email protected]> wrote in
message
news:gmsh0v$guk$[email protected]..
> Can I scan my style sheets to remove unwanted rules? As
I develop a site
> and
> fiddle with my CSS I realise there are a few bits and
pieces that become
> redundant. Can DW find them for me and remove them? In
my defence, I try
> hard
> not to write sloppy code but it's a consequence of
riding the learning
> curve!
>
> Thanks
>
> Martin
>

Floating Divs in Image Gallery not within Div

I am creating a property page template that is nested within the main website template. Within this template, I have created a div within a div for the Image Gallery I am going to create.There is a main image and then 5 thumbnails underneath and all of this is centered.
What seems to be occurring is that if I float all of my thumbnail divs "left" so that they are all on same line, then they are no longer within the Image Gallery div. If I take away the "float" attribute (as I did on thumbnail 1 for an example), it finally resides within the div, however, the other jump down to the next line below it...stacking one on top of the other.
I am getting so confused, though I have commented at the end of each div, but I am just not sure what is required here. Ran validator on Web Tools for both HTML and CSS, but I get nothing. Help!
Here is the link.
Thank you!
Samantha

Hi Samatha,
Try following:
Add a clear after your thumbnails as below:
</div>
<br style="clear:both" />
And in your css add float left to all your thumbnails.
.profile #infoImageGallery #infoImageThumb1 {
    float: left;
    width: 95px;
    margin-right: 5px;
    height: 63px;
    background-color: #00F;
    margin-bottom: 5px;
.profile #infoImageGallery #infoImageThumb2 {
    float: left;
    width: 95px;
    margin-right: 5px;
    height: 63px;
    background-color: #00F;
.profile #infoImageGallery #infoImageThumb3 {
    float: left;
    width: 95px;
    margin-right: 5px;
    height: 63px;
    background-color: #00F
.profile #infoImageGallery #infoImageThumb4 {
    float: left;
    width: 95px;
    margin-right: 5px;
    height: 63px;
    background-color: #00F;
.profile #infoImageGallery #infoImageThumb5 {
    float: left;
    width: 95px;
    margin-right: 5px;
    height: 63px;
    background-color: #00F;
Regards,
Vinay

Floating image or table right

I have been able to float an image right. Problem is, it floats all images right when I only want one specific one floated right on the page. How can I controll this for just one image? If I try to specify a float in the CSS, it automatically put a strike-thru the property and after hovering over it, tells me the "property is not inheritable."
Anyone have ideas to help me?
Thanks,
Jim

Give your image an id and float this using css.
e.g. - (inside the image tag place this)
id="myfloatedimage"
css =
#myfloatedimage {
float: right;
PZ

Adding a hyperlink to a css box

Hello !
I am trying to add a hyperlink to a css box so when clicked it redirects to a page: for example www.google.com
Also in the box i have an image.
This is the box:
CSS
#Box1 {float: left; background:url(butondesprenoi.jpg);background-size:contain; }
#Box1:hover {background:url(butondesprenoi2.jpg);background-size:contain; transform:rotate(7deg);
-ms-transform:rotate(7deg);
-webkit-transform:rotate(7deg); }
HTML
<div id="Box1">
<h2></h2>
So how can i do it ?

Valen90 wrote:
Hello !
I am trying to add a hyperlink to a css box so when clicked it redirects to a page: for example www.google.com
Also in the box i have an image.
So how can i do it ?
Add a hyperlink to a css box? not sure what exactly do you mean. However, you can add a hyperlink in your html code like this:
<div id="Box1">
<h2>Heading Level 2</h2>
<a href="http://google.com">
<img alt="image-inside-box" class="auto-style1" height="340" src="https://sc.imp.live.com/content/dam/imp/surfaces/mail_signin/v3/images/SISU_0003_SkypeMidEngaged_475x340.jpg" width="475"></a></div>
hope this is what you are after.

List & float right problem

I would like to make the lower part of my header div look as below but have not been able to get the CSS right.
My attempt is on: http://www.glidingswans.co.uk/testing.html. I've been unable to move the "Praesent Aliquam Justo Convallis!" to the vertical middle of the left hand side and for some reason I've managed to float right the 1st and 3rd items in the list, but the 2nd item has remained on the left hand side.
I'm using CS4 DW and a DW three fixed column, header & footer template.
http://www.glidingswans.co.uk/testing.html

Not sure if this helps, but you have defined your headlines class for the <li> tag in the CSS but applied it to both the <ul> and <li> tags. What happens if you remove it?
Also, did you try breaking that div into two parts, like this:
<div id="LeftSubHeadContent">
     <span class="title">Praesent Aliquam<br />
      Justo Convallis!</span>
</div>
<div id="RightSubHeadContent">
     <ul>
        <li class="headlines">Lorem ipsum dolor sit amet,</li>
        <li class="headlines">Consectetuer adipiscing elit,</li>
        <li class="headlines">Praesent aliquam justo convallis</li>
     </ul>
</div>

. . . and then creating the CSS to float the respective divs left and right?
Just the first thoughts off the top of my head.
Chris
www.cdeatherage.net

CSS positioning within table cells

Maybe I've just been staring at this too long but I'm stumped. I want to position a table (could be a list) within a table by setting the parent element to relative and the position of the child element to absolute. The only problem is that I can't get my table cells to act as parent elements so the smaller table (or list) positions itself relative to the wrapper div which is also set to relative. Do I have to create divs within the table cells? If so it sort of defeats the purpose of the table. How can I do this using appropriate markup?
Hope this makes sense. I think my brain has gone numb.
Here's the page I'm trying to fix:
http://www.kirstencassidy.com/_miniprints2.html
Thanks in advance for your help.

Lon Winters wrote:
What I see is a table with red borders that contain images left justified. What do you want to position - the images? I think you could do all this in CSS without any tables.
I think what the OP is trying to do is position some text to the right of the images?
Obvious answer as the OP has used tables is to insert another 2 column table into each existing table cell, one for the image an one for the text.
Alternative is to use css to float the images left, give the image a right margin and then the text will appear to the right of it in the table cell. Then just style the text with some css?

Css forms help please

Hi Everyone, Lining up checkboxes with out using tables. Any
ideas?
This is how i have achieved it but --
I will make classes for these of course but what i wanted to
know is how i can get the checkbox to line up nicely
without using padding-right: 39px; etc
<div style="width:275px;">
<p>
<label style="font-family: Arial; FONT-SIZE: 120%;
padding-right: 55px; COLOR: #000000;">
<strong>歯が痛い</strong>
:: Sore Tooth</label>
<input type="checkbox"/>
<label style="font-family: Arial; FONT-SIZE: 120%;
padding-right: 18px; COLOR:
#000000;"><strong>歯肉出血</strong>
:: Bleeding Gums</label>
<input type="checkbox"/>
<label style="font-family: Arial; FONT-SIZE: 120%;
padding-right: 1px; COLOR:
#000000;"><strong>歯が折ている</strong>
:: Broken Tooth</label>
<input type="checkbox"/>
<label style="font-family: Arial; FONT-SIZE: 120%;
padding-right: 39px; COLOR:
#000000;"><strong>口臭がある</strong>
:: Bad Breath </label>
<input type="checkbox"/>
</p>
</div>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
label {
float: left;
clear: both
input {
float: right;
p {
margin: 0;
padding: 0;
clear: both;
}</style>
</head>
<body>
<div style="width:275px;">
<p>
<label>:: Sore Tooth </label><input
type="checkbox"/></p>
<p>
<label>:: Bleeding Gums </label><input
type="checkbox"/></p>
<p>
<label>:: Broken Tooth</label><input
type="checkbox"/>
</p>
<p>
<label>:: Bad Breath </label> <input
type="checkbox"/></p>
</p>
</div>
</body>
</html>
quiero mas wrote:
> Hi Everyone, Lining up checkboxes with out using tables.
Any ideas?
> This is how i have achieved it but --
> I will make classes for these of course but what i
wanted to know is how i can
> get the checkbox to line up nicely
> without using padding-right: 39px; etc
>
>
> <div style="width:275px;">
> <p>
>
> <label style="font-family: Arial; FONT-SIZE: 120%;
padding-right: 55px; COLOR:
> #000000;">
>
???? :: Sore Tooth</label>
> <input type="checkbox"/>
>
> <label style="font-family: Arial; FONT-SIZE: 120%;
padding-right: 18px; COLOR:
> #000000;">
???? :: Bleeding Gums</label>
> <input type="checkbox"/>
>
> <label style="font-family: Arial; FONT-SIZE: 120%;
padding-right: 1px; COLOR:
> #000000;">
?????? :: Broken Tooth</label>
> <input type="checkbox"/>
>
> <label style="font-family: Arial; FONT-SIZE: 120%;
padding-right: 39px; COLOR:
> #000000;">
????? :: Bad Breath </label>
> <input type="checkbox"/>
>
> </p>
> </div>
>

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome. Works in IE. This is my first time trying to post a question - so please be kind. I am also not good with code and am finding css a real challenge after learning to design based on tables. I'm using CS5.
The "test" page with the slide show is: http://www.reardanwa.com/index-slides.html   The same page without the slide show is http://www.reardanwa.com/
I realize the images are not ideally sized - I'll fix those once I get the pages to function. Maybe I need a different slide show? I would prefer a widget that I can modify to required size & postition. Again - I'm not good at building with code from scratch.
The problem is the naviagation links that are directly next to the slide show do not work in Firefox of Chrome. They do work in IE.
I've read about using jQuery.noConflict(); code but can't figure out the correct way to use it in my case or whether that's even part of the solution. I know my code is not well organized as I have cobbled together from various sources in an attempt to format the page the way the client wants it. Also, FYI, I will eventually try to make the page work in Surreal CMS.
I've spent sevaral days over the last several weeks trying to solve sth slide show/navigation conflict - so any specific light you can shed will be much appreciated.
Thanks in advance.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reardan Area Chamber of Commerce</title>
<meta name="description" content="home page for Reardan Area Chamber of Commerce" />
<meta name="keywords" content="Reardan WA, chamber of commerce" </>
<script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"> </script>
<script type="text/xml">
</script>
<style type="text/css">
                              #slideshow {
                                  padding: 10px;
                                        margin:0;
                              #slideshow-caption{
                                        padding:0;
                                        margin:0;
                              #slideshow img, #slideshow div {
                                  padding: 10px;
                                  background-color: #EEE;
                                  margin: 0;
body {
          font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
          background: #004B8D;
          margin: 0;
          padding: 0;
          color: #000;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
          padding: 0;
          margin: 0;
h1, h2, h3, h4, h5, h6, p {
          margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
           /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
.left
position:absolute;
left:0px;
.center
margin:auto;
width:95%;
.box
          position:relative;
          left:-90px;
          width:950px;
          height:350px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          z-index:1000;
.slide{
    position:absolute;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
          border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
          color: #42413C;
          text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
          color: #6E6C64;
          text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
          text-decoration: none;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
          width: 960px;
          min-height:900px;
          padding:5px 0px 0px 0px;
          background: #E8F8FF;
          margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
          background: #E8F8FF;
          padding:10px 5px 0px 5px;
.sidebar1 {
          float: left;
          width: 225px;
          margin: 60px;
          color: #FFFF0D;
          background: #595FFF;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
    z-index:-1;
.sidebar2 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:2;
.sidebar3 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:3;
.content {
          padding: 0px 0px 0px 0px;
          width: 780px;
          float: left;
          background: #E8F8FF;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
          padding: 0px 15px 5px 10px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
          list-style: none; /* this removes the list marker */
          border-top: 0px solid #FFFF66; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
          margin-bottom: 50px; /* this creates the space between the navigation on the content below */
          font: Arial Black, Verdana, , Helvetica, sans-serif;
          font-size:1.3em;
          font-weight:bold;
          z-index:2;
ul.nav li {
          border-bottom: 0px solid #FFFF66; /* this creates the button separation */
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
          padding: 3px 0px 5px 0px;
          display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
          width: 185px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
          text-decoration: none;
          color: #FFFF0D;
          background: #595FFF;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
          background: #595FFF;
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
          color: #FFFFFF;
/* ~~ The footer ~~ */
.footer {
          padding: 10px 0;
          background: #595FFF;
          color: #FFFF0D;
          position: relative;/* this gives IE6 hasLayout to properly clear */
          clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
          float: right;
          margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
          float: left;
          margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
          clear:both;
          height:0;
          font-size: 1px;
          line-height: 0px;
-->
</style>
</head>
<body>
<div class="container">
<div class="header">
<a href="#"><img src="images/Chamber-Logo-2.gif" alt="Reardan Chamber Logo" width="187" height="163" hspace="10" vspace="5" align="top" /></a><img src="images/Reardan-Chamber-Title.gif" width="476" height="204" alt="Reardan Area Chamber of Commerce, Dedicated to Preserving and Enhancing Area Businesses" /><p></p>
<p style="color: #F00">This Site is under construction! Please pardon our dust as we create!</p>
</div>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="about.html">About Us</a></li>
      <li><a href="history.html">Reardan History</a></li>
      <li><a href="activities.html">Activities</a></li>
      <li><a href="business.html">Business<br />
        Directory</a></li>
      <li><a href="about.html">Join the<br />
        Chamber</a></li>
       <li><a href="links.html">Links<br />
  <span style="font-size: 85%">Tourism</span><br />
      </a></li>
    </ul>
     </div>
<br />
<br />
<br />
<br />
<div class="box" +"slide">
<script type="text/javascript">
// BeginOAWidget_Instance_2559022: #slideshow
                           slideshowAddCaption=true;
$(window).load(function() {
$('#slideshow').cycle({
                    after:                              slideshowOnCycleAfter, //the function that is triggered after each transition
                    autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                    fx:                                        'blindX',// name of transition effect
                    pause:                              false,     // true to enable pause on hover
                    randomizeEffects:          true, // valid when multiple effects are used; true to make the effect sequence random
                    speed:                              100, // speed of the transition (any valid fx speed value)
                    sync:                              true,     // true if in/out transitions should occur simultaneously
                    timeout:                    5000, // milliseconds between slide transitions (0 to disable auto advance)
                    fit:                              true,
                    height:                       '300px',
                    width:         '525px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
function slideshowOnCycleAfter() {
          if (slideshowAddCaption==true){
                              $('#slideshow-caption').html(this.title);
// EndOAWidget_Instance_2559022
</script>
<div id="slideshow">
    
    <img src="images/100_1537.jpeg" width="600" height="450" title="caption for image1" /> <img src="images/Parade-2011-2.jpg" width="300" height="225" title="caption for image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption for image3" />
    <div title="sample title"> Images for slide show will need to be re-sized to fit box to avoid distortion</div>
    <img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>

<div id="slideshow-caption"></div></div>
<div class="sidebar2" "anotherClass editable"><p align="center"><strong>Chamber News</strong><br />
Local News item
<br />
Another New item</p>
<p align="center">lots of news this week<br />
    <br />
    <br />
    <br />
</p>
</div>
<div class="sidebar3" "anotherClass editable"><p align="center"><strong>Upcoming Events</strong></p>
<div align="center">    <a href="activities.html" style="color: #FFFF0D">Community wide yard sales</a><br />
    <br />
    <br />
    <br />
    <br />
</div>
</div>
<div class="content"><br />
<br />
</div>
<div class="footer">
        <p align="center"><span style="font-size: small">Reardan Area Chamber of Commerce</span><br />
          <span style="font-size: x-small">[email protected] - 509.796.2102</span><br />
        </p>
        
</div></body>
</html>

If you DO want the slideshow overlaping the navigation try the below css:
.sidebar1 {
    float: left;
    width: 225px;
    margin: 60px 0px 60px 60px;
    color: #FFFF0D;
    background: #595FFF;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
.box {
float: left;
margin-left:-60px;
width:700px;
height:350px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;

OT: CSS TR float

Similar Messages

Maybe you are looking for