WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > HTML & XHTML > Text(table) moving up and to the right in FF

Reply
  Thread Tools Display Modes
Old 22nd September 09, 07:23 PM   #1
swaddock
WLC Member
 
Join Date: Nov 2007
Posts: 37
Default Text(table) moving up and to the right in FF

Beginning layout on a simple page and I have a div setting the Tab and a div setting the content. Problem is, the content is moving up and to the left of the top nav.

I know this is a simple fix I just can't remember how to resolve this.

Code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HTML><HEAD><TITLE>Nifty Corners: Javascript CSS rounded corners</TITLE>
<META http-equiv=content-type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16890" name=GENERATOR>
<STYLE type=text/css>

HTML {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
	BACKGROUND: #fff; FONT: 70% Arial,sans-serif
}
DIV#menu {
	BACKGROUND: #000; FLOAT: left; WIDTH: 100%; PADDING-TOP: 120px;
}
UL#nav {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL#nav LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL#nav {
	MARGIN-LEFT: 100px; WIDTH: 650px
}
UL#nav LI {
	FLOAT: left; MARGIN-RIGHT: 3px; TEXT-ALIGN: center
}
UL#nav A {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #e7f1f8; FLOAT: left; PADDING-BOTTOM: 5px; WIDTH: 7em; COLOR: #000; PADDING-TOP: 5px; TEXT-DECORATION: none
}
UL#nav A:hover {
	BACKGROUND: #FFCCFF; COLOR: #fff
}
UL#nav LI.activelink A {
	BACKGROUND: #fff; COLOR: #003
}
UL#nav LI.activelink A:hover {
	BACKGROUND: #fff; COLOR: #003
}
</STYLE>
<LINK 
href="Nifty%20Corners%20Javascript%20CSS%20rounded%20corners_files/niftyCorners.css" 
type=text/css rel=stylesheet><LINK media=print href="niftyPrint.css" 
type=text/css rel=stylesheet>
<SCRIPT 
src="Nifty%20Corners%20Javascript%20CSS%20rounded%20corners_files/niftycube.js" 
type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
window.onload=function(){
Nifty("ul#nav a","small transparent top");
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id=menu> 
<UL id=nav>
  <LI class=activelink id=home><A 
  href="http://www.html.it/articoli/niftycube/nifty4.html#">About Us</A> </LI>
  <LI id=who><A 
  href="http://www.html.it/articoli/niftycube/nifty4.html#">Classes</A> </LI>
  <LI id=prod><A 
  href="http://www.html.it/articoli/niftycube/nifty4.html#">Instructors</A> </LI>
  <LI id=serv><A 
  href="http://www.html.it/articoli/niftycube/nifty4.html#">Registration</A> </LI>
  <LI id=cont><A 
  href="http://www.html.it/articoli/niftycube/nifty4.html#">Company</A> 
  <LI id=cont><A 
  href="http://www.html.it/articoli/niftycube/nifty4.html#">Directions</A> 
</LI>
<LI id=cont><A 
  href="http://www.html.it/articoli/niftycube/nifty4.html#">Gallery</A> 
</LI></UL></DIV><!-- Codice Google Analytics -->
<SCRIPT 
src="Nifty%20Corners%20Javascript%20CSS%20rounded%20corners_files/urchin.js" 
type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
			_uacct = "UA-272662-1";
			_udn="html.it";
			urchinTracker();
		</SCRIPT>
<!-- Codice Google Analytics -->
<div style="background:#CCCCCC"  style="display:inline">
<table width="700" border="0" cellspacing="0" cellpadding="10" style="margin-left:60px;">
  <tr valign="top">
    <td width="30%"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
    <td width="70%">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</BODY></HTML>
swaddock is offline   Reply With Quote
Old 22nd September 09, 07:31 PM   #2
rkrause
WLC Mod
 
Join Date: Sep 2009
Posts: 893
Default Re: Text(table) moving up and to the right in FF

hi,

you have errors in his layout... missing a div tag somewhere and possilby an <li> element. that could part of your problem.

Ryan.
rkrause is offline   Reply With Quote
Old 22nd September 09, 07:34 PM   #3
rkrause
WLC Mod
 
Join Date: Sep 2009
Posts: 893
Default Re: Text(table) moving up and to the right in FF

nope, i was wrong - this line of code was not written right - <div style="background-color:#CCCCCC; display:inline;">

Ryan.
rkrause is offline   Reply With Quote
Old 22nd September 09, 07:45 PM   #4
swaddock
WLC Member
 
Join Date: Nov 2007
Posts: 37
Default Re: Text(table) moving up and to the right in FF

I fixed that and moved it up to the css portion of the page. It didn't have any affect. When I added <p>Hello World</p> just above the line that read:
<div id=content>.....it worked. That's no fix but, I'm understanding why the div was floating up and to the right of the previous div.

Revised code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HTML><HEAD><TITLE>Nifty Corners: Javascript CSS rounded corners</TITLE>
<META http-equiv=content-type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16890" name=GENERATOR>
<STYLE type=text/css>

HTML {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
	BACKGROUND: #fff; FONT: 70% Arial,sans-serif
}

DIV#content { background-color:#CCCCCC; display:inline;
}
DIV#menu {
	BACKGROUND: #000; FLOAT: left; WIDTH: 100%; PADDING-TOP: 120px; clear:none;
}
UL#nav {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL#nav LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL#nav {
	MARGIN-LEFT: 100px; WIDTH: 650px
}
UL#nav LI {
	FLOAT: left; MARGIN-RIGHT: 3px; TEXT-ALIGN: center
}
UL#nav A {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #e7f1f8; FLOAT: left; PADDING-BOTTOM: 5px; WIDTH: 7em; COLOR: #000; PADDING-TOP: 5px; TEXT-DECORATION: none
}
UL#nav A:hover {
	BACKGROUND: #FFCCFF; COLOR: #fff
}
UL#nav LI.activelink A {
	BACKGROUND: #fff; COLOR: #003
}
UL#nav LI.activelink A:hover {
	BACKGROUND: #fff; COLOR: #003
}
</STYLE>
<LINK 
href="Nifty%20Corners%20Javascript%20CSS%20rounded%20corners_files/niftyCorners.css" 
type=text/css rel=stylesheet><LINK media=print href="niftyPrint.css" 
type=text/css rel=stylesheet>
<SCRIPT 
src="Nifty%20Corners%20Javascript%20CSS%20rounded%20corners_files/niftycube.js" 
type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
window.onload=function(){
Nifty("ul#nav a","small transparent top");
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id=menu> 
<UL id=nav>
  <LI class=activelink id=home><A 
  href="http://www.html.it/articoli/niftycube/nifty4.html#">About Us</A> </LI>
  <LI id=who><A 
  href="http://www.html.it/articoli/niftycube/nifty4.html#">Classes</A> </LI>
  <LI id=prod><A 
  href="http://www.html.it/articoli/niftycube/nifty4.html#">Instructors</A> </LI>
  <LI id=serv><A 
  href="http://www.html.it/articoli/niftycube/nifty4.html#">Registration</A> </LI>
  <LI id=cont><A 
  href="http://www.html.it/articoli/niftycube/nifty4.html#">Company</A> 
  <LI id=cont><A 
  href="http://www.html.it/articoli/niftycube/nifty4.html#">Directions</A> 
</LI>
<LI id=cont><A 
  href="http://www.html.it/articoli/niftycube/nifty4.html#">Gallery</A> 
</LI></UL></DIV><!-- Codice Google Analytics -->
<SCRIPT 
src="Nifty%20Corners%20Javascript%20CSS%20rounded%20corners_files/urchin.js" 
type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
			_uacct = "UA-272662-1";
			_udn="html.it";
			urchinTracker();
		</SCRIPT>
<!-- Codice Google Analytics -->

<p>Hello World</p>
<div id=content>
<table width="700" border="0" cellspacing="0" cellpadding="10" style="margin-left:60px;">
  <tr valign="top">
    <td width="30%"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
    <td width="70%">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</BODY></HTML>
swaddock is offline   Reply With Quote
Old 22nd September 09, 08:15 PM   #5
rkrause
WLC Mod
 
Join Date: Sep 2009
Posts: 893
Default Re: Text(table) moving up and to the right in FF

what if you just insert a <div style="clear:both;"></div>

Ryan.
rkrause is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 05:35 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.