|
CSS - Small Problem With Nav Bar In Safari
Hi everyone,
I am new to the forum. I am new to CSS and just trying to learn as much as i can as i go. I am currently working on a website and having a small problem with my drop down menus. It works great in Firefox, but in Safari when i hover over the drop down, it shifts to the left by a few pixels. I haven't added the IE workaround yet because i wanted to get this sorted before doing that so it won't work in IE yet. I would post a link but can't because i'm too new. I'm new to this, so be kind on my coding The code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Center test - "text-align: center" set for body, "text-align: left" for containing div</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
text-align: center;
}
div#container
{
width: 100%;
background-color: #EAFBFF;
width:760px;
height:220px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #0066FF;
border-right-color: #0066FF;
border-bottom-color: #0066FF;
border-left-color: #0066FF;
}
div#container2
{
width: 760px;
background-color: #ddd;
width:760px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #0033FF;
border-right-color: #0033FF;
border-bottom-color: #0033FF;
border-left-color: #0033FF;
padding-top: 15px;
padding-bottom: 15px;
}
div#container3
{
width: 760px;
background-color: #666666;
width:760px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #0033FF;
border-right-color: #0033FF;
border-bottom-color: #0033FF;
border-left-color: #0033FF;
padding-top: 13px;
padding-bottom: 10px;
}
#container {
}
#Layer1 {
position:absolute;
width:760px;
height:115px;
z-index:1;
left: 405px;
top: 102px;
background-color: #0000FF;
overflow: scroll;
}
#container2 {
}
#Layer2 {
position:relative;
width:760px;
height:600px;
z-index:1;
left: 405px;
top: 102px;
background-color: #0000FF;
overflow: scroll;
}
#container4 {
font-family: Arial, Helvetica, sans-serif;
width: 500px;
font-size: 14px;
font-style: normal;
color: #DDDDDD;
text-decoration: none;
text-align: left;
margin-right: 110px;
margin-left: 125px;
background-color: #999999;
border: thin solid #999999;
padding-left: 15px;
}
#Layer3 {
position:relative;
width:200px;
height:600px;
z-index:1;
left: 405px;
top: 102px;
background-color: #0000FF;
overflow: scroll;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
background-color: #666666;
margin: 0px;
padding: 0px;
height: 20px;
}
#navbar ul {
padding: 0;
margin: 0;
list-style: none;
}
#navbar li {
float: left;
text-align: center;
background-color: #666666;
position: relative;
width: 130px;
}
#navbar li ul{
position: absolute;
display: none;
text-align: center;
line-height: 25px;
padding-top: 7px;
}
#navbar li > ul {
top: auto;
left: auto;
}
#navbar li:hover ul {
display:block;
text-align: center;
text-indent: 0;
}
#content {
clear: left;
}
#mainphoto {
padding: 0px;
float: right;
border: 1px solid #0066FF;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px;
}
#container6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
padding-right: 30px;
padding-left: 30px;
}
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.style4 {color: #000000}
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; }
a {
font-size: 12px;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #CC6600;
}
a:active {
text-decoration: none;
color: #CCCCCC;
}
</style>
</head>
<body>
<div id="container">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="(URL address blocked: See forum rules)=7,0,19,0" width="760" height="220">
<param name="movie" value="(URL address blocked: See forum rules)">
<param name="quality" value="high">
<embed src="(URL address blocked: See forum rules)" quality="high" pluginspage="(URL address blocked: See forum rules)" type="application/x-shockwave-flash" width="760" height="220"></embed>
</object>
</div>
<div class="style2" id="container3">
<div id="navbar">
<ul>
<li><a href="(URL address blocked: See forum rules)">Home</a></li>
<li>About the Office
<ul>
<li><a href="">Meet Dr. Toolson
</a></li>
<li><a href="">Meet the Team</a></li>
<li><a href="">Office Tour</a></li>
<li><a href="">Location</a></li>
</ul>
</li>
<li>About Orthodontics
<ul>
<li><a href="">Adults</a></li>
<li><a href="">Children</a></li>
</ul>
</li>
<li>Life with Braces</li>
<li>Contact Us
<ul>
<li><a href="">Contact Information</a></li>
<li><a href="">Request Appointment</a></li>
<li><a href="">Location</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container2">
<div id="container4">
<p class="style3">Contact Information Form</p>
<form action="(URL address blocked: See forum rules)" method="post" class="style4">
<span class="style1">
<label>Name
<br>
<input type="text" name="Name">
</label>
</span>
<span class="style1">
<br>
<br>
<label>Email
<br>
<input type="text" name="Email Address">
</label>
</span>
<span class="style1">
<br>
<br>
<label>Phone Number
<br>
<input type="text" name="Phone Number">
</label>
</span>
<span class="style5">
<br>
<br>
<label><span class="style4">Description (if neccessary)</span> </label>
</span>
<span class="style4">
</span>
<label><br>
<textarea name="Description" rows="5"></textarea>
</label>
<label>
<br><br>
<input name="Submit" type="submit" class="style1" value="Submit">
</label>
<label>
<input name="Reset" type="reset" class="style1" id="Reset" value="Reset">
</label>
<input name="recipient" type="hidden" id="recipient" value="jeff@dinorestoration.com">
<input name="redirect" type="hidden" id="redirect" value="(URL address blocked: See forum rules)">
</form>
</div>
</div>
<div class="style1">
Copyright Toolson Orthodontics 2009 </div>
<p> </p>
</body>
</html>
Similar TutorialsHello all, I have bumped into some strange problems. Chrome seems to be viewing my fonts alot thinner/smaller than Safari and Firefox. Is there a method to create consistency and ignoring the webbrowsers standards? Its creating a mess, specially with my text which is using text-shadow. The blur looks like disaster. Thanks in advance. Well I got sick of reading through tons of <td> and <tr> tags today so I sat down and tried to write my first CSS script ever. I got the basic idea of it and tweaked it using Firefox/Firebug to get it working great. The problem was I checked back in IE (since most people use it =/...) It looked all messed up and I tried changing a lot of things around and I just got frustrated. Since I am new to this whole thing with CSS, I don't know what to look for or change. I know that the top links are messed up but I will fix those after I get my layout working in both browsers. Can anyone help me out? www.etwcweb.com/ETWC.html Here is the CSS code also: Code: /* Main Part */
body {
font-family: Arial, Helvetica, sans-serif;
background: #333333 url(Images/mainbacknew.png) repeat-y;
font-size: 14px;
margin: 0px;
}
h1 {
font-size: 115%
font-weight: bold;
color: #000000;
}
p, ol, ul {
line-height: 145%
}
a {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:0pt;
padding-left:0pt;
}
ul li {
list-style: url(Images/bluearrow.png);
padding-left:15px;
}
img {
border:medium none;
}
img.left {
float:left;
margin:5px 9px 0pt 0pt;
}
img.right {
float:right;
margin:5px 9px 0pt 0pt;
}
hr {
display:none;
}
/* Floating part of Page */
#main_content {
width: 800px;
margin: 0pt auto;
background: url(Images/bg_content.jpg) repeat;
}
#main_content a {
color: #000000;
text-decoration: underline;
}
#main_content a:hover {
color: #666666;
}
/* The Top Picture */
#top_area {
background: url(Images/CSSHeader.png);
height: 433px;
width: 100%;
}
#top_area li {
display: block;
}
#top_area a {
color: #FFFFFF;
display: block;
float: left;
padding: 40px 20px 0pt;
text-decoration: none;
}
/* Search Form */
.search {
float: right;
padding-right: 20px;
margin-top: 50px;
margin-bottom: 50px;
}
.search h1 {
color: #FFFFFF;
font-size: 150%;
}
/* Top Links */
#main_links {
/* background-color: #000000;
opacity: 0.7; */
width: 800px;
margin: 0pt auto;
}
#main_links ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-left: 0pt;
padding-left: 0pt;
}
/* Right Side of Floating Page */
#stories {
background: transparent url(Images/bg_content.jpg) repeat;
width: 535px;
padding: 30px;
float: right;
margin: 0pt auto;
}
#stories h2 {
padding-left: 20px;
padding-top: 15px;
}
/* Left Side */
#left_bar {
background: transparent url(Images/bg_content.jpg) repeat;
float: left;
width: 205px;
margin: 0pt auto;
}
.left {
padding-right: 10px;
padding-top: 0px;
}
.left_list {
padding: 20px;
}
.left_list ul li {
border-top: 1px solid #CCCCCC;
padding: 10px 15px;
}
#left_bar h1 {
background: url(Images/LeftHeaders.png) repeat-x;
padding-left: 20px;
padding-top: 5px;
color: #FFFFFF;
}
/* Message */
#top_footer {
width: 800px;
margin: 0pt auto;
background-color: #666666;
color: #FFFFFF;
font-size: 90%;
font-weight: bold;
padding-top: 4px;
padding-bottom: 4px;
text-align: center;
line-height: 150%;
}
/* Bottom Links */
#links {
width: 800px;
margin: 0pt auto;
text-align: center;
background: #000000;
color: #FFFFFF;
font-size: 90%;
line-height: 160%;
padding-top: 8px;
padding-bottom: 3px;
}
#links a, #links a:hover {
text-decoration: none;
font-weight: bold;
}
#links .contact {
}
#links .contact a, #links .contact a:hover {
text-decoration: underline;
color: #0000CC;
}
Thanks in advance guys and sorry if this is already posted here, but my brain is frazzled and I couldn't find it with a quick search or three Hi, I'm new to using forums, and need a little help trying to fix an IE6 problem. My code is all valid, and i'm using xhtml strict. my page works fine in all the main browsers (including ie:7/8) just not ie6. Here is the problem i have. I have a div (links) which is 956px wide and i am floating 5 other divs (1-5) within the links div. The widths and padding for all of the 5 divs equals 956px's But for some reason the last div (lower5) is dropping out of alignment, it looks like ie6 thinks there is not enough room for all of the 5 divs to fit within the outer div. As you can see i have tried using line height:0; and that did not help. Here is my code...........Any idea's HTML: <div id="lower-links"> <div id="lower1"></div> <div id="lower2"></div> <div id="lower3"></div> <div id="lower4"></div> <div id="lower5"></div> </div> CSS: #links { margin:0; padding:0; background-color: #FFFFFF; width: 956px; height:374px; float: right; line-height:0; } #lower1,#lower3 { background-color: #FFFFFF; width: 161px; height:308px; float: left; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } #lower2,#lower4 { background-color: #FFFFFF; width: 162px; height:308px; float:left; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } #lower5 { background-color: #FFFFFF; width: 160px; height:308px; float: right; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } Ok, I have a two column layout. And I'm trying to get the base of the div stacks to match eachother. Here's the stripped down code I've been playing with to try to create this behavior. Code: <div style="width:600px;">
<div style="width:50%; background-color:#66C; float:right; text-align:center;">
<img src="#" width="150" height="300" alt="Fake Content"/><br />
</div>
<div style="width:50%; height:150px; background-color:#0F0;">1</div>
<div style="width:50%; height:30px; background-color:#C96;">2</div>
<div style="width:50%; height:50px; background-color:#CCC;">3</div>
<div style="clear:both;"></div>
</div>
So the size of div #1 is always fixed, #2 contains dynamic content, and #3 is fixed content but I would like the height of #3 to stretch to match the right column when needed. For the right column, the content is dynamic, and I would like it to stretch to match the bottom of #3 when needed. So basically, the height of both column will vary and I'd like the shorter of the 2 to stretch. I looked around and experimented a bit with some success, but not exactly the behavior I was looking for. The things that have been giving me the most trouble, is that the left column consists of 3 divs, and the right column is floated. From the left, I could probably get away with removing the content from #1 from it's div and let it hang out in the parent div, but the other two really need their own containers. Also, I don't know how else to put the right column on the right side other than to use a float or absolute position (and absolute won't expand the parent div) because both columns are dynamic... Anyhow, I'm searching for suggestions. One thing that sucks is I know this would be a non issue using tables, but this is a page layout and I'm not about to cave now. Building a online store website... If you go here, you can see my problem. My problem is, when the product title is longer than a single line, then it moves the transparent box down. I need the transparent box to move up. If anyone can help, thanks! hey just got a small problem i dont know hw to fix, take a look at my site http://funnyguys99.tripod.com/index.htm if u hover over the links on the left side of the page, the border around them is not even. I want the border to end at the same spot when u hover over them, no matter how many more letters there are in the link. Here's the Css for the left bar, please fix it [CODE] div#menubar { padding-right: 0.5em; padding-left: 0.5em; padding-bottom: 20%; margin: 120px 0px 0px 0px; padding-top: 0.5em; left: 0px; width: 8em; top: 0px; height: auto; position:absolute; background:#FFFFFF; border-right:1px solid black; border-bottom:1px solid black; border-top:1px solid black; } div#menubar ul { padding-left:0px; padding-top:0px; list-style:none; line-height: 85%; margin:0px; } div#menubar a { font-weight: bold; text-decoration: none; font-size:0.6em; padding-right:7.5em; padding-top:0px; padding-bottom:0px; } div#menubar a:link { color: #ffa500; } div#menubar a:visited { color:dark red; } div#menubar a:active { font-weight: normal; } div#menubar a:hover { color: white; background:#999999; border:1px solid black; } [CODE] Hi, I've been a close watcher of this forum for some time now, and it's now that I've run into a problem I can't figure out. http://donimusic.com/test/ In the above site (currently in progress), I have made the #ctop and #cbottom divs a height of 2px, yet in IE it displays the height much more and thus creates the image to repeat itself. I can't figure out how to fix this (for view wanted - view in FF). Thank you kindly for your help. Stacey im making a panel with rounded corners just 4 divs , topLeft, topRight etc... i have them inside 1 container div that is 80% width, the 4 corner div's are all 50% width and 50% height it's all floated left and theres a <BR> between the top en bottom section but it works only in firefox...in IE they just line up below eachother unless i make the width of them 49%....so wheres the 1 ****ing % ? thanks I'm having trouble with overlapping clickable areas when the line height is set smaller than 1em. i.e. Code: <ul style="line-height:0.825em;font-size:60px;"> <li><a href="#">TOO</a></li> <li><a href="#">BIG?</a></li> <ul> live example at: http://www.beechersmithstackhouse.info/buggs.html the buginess being that when you mouse over the lower portion of "TOO" , the "BIG?" is in it's hover state and is clickable. ... ... setting line-height for each item doesn't work. ... help? Hey Everyone, I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much Currently my site, http://www.kasiaozga.com , works correctly in Firefox on mac and Windows and in ie for mac and Windows. However, in Safari, the mid section of the navigation bar on the main page (index.html) appears incorrectly on the page. I would really appreciate it if any Safari users could take a look at the page and recommend a solution to enable the page to display correctly. Thanks! -Kasia Hi - I'm relatively new to using CSS, so please bear with me. I've attempted to put an imagemap on my homepage using CSS. There is a main background image and there are a bunch of tiny images that are hidden, but then appear over the top of the main image when you move the mouse over them. You can view the page online - it's the main homepage of my website: www (dot) midwood (dot) net (It's the page w/ the mountain background, etc). This HTML and CSS are both valid according to W3.org. The code works fine (as expected) on both IE6 and Firefox. If you want to see the effect I'm looking for, use one of those browsers and you'll get the idea. The problem I'm running into is that it doesn't work in Safari. The tiny images do show up in the right place when you roll over the correct spot, but they are not initially hidden (as they are in IE or FF). I'd appreciate it if somebody with more CSS knowledge than me took a look at my code for the homepage . Is there anything obvious I'm doing wrong that is causing it not to work in Safari? Or is it just a Safari rendering bug? If it is a bug in Safari's rendering, is there a workaround so that I can get the desired effect on all three browsers? Thanks. Howdy! I'm using the Jello mold layout from P.I.E. and I have it working GREAT on a couple other projects with no real issues (with Safari or anything else for that matter), but I do have a problem in this one project. take a look he http://pnlab.soundwebdev.com/changetheme-xSixteen.phtml Now - there are a few other issues, but the one I am focussing on here is that Safari is basically completely non-functional on the main (right) column. I can't click the links, I can't select the text - its like there is a transparent layer over the top of everything on the right - but only in safari. This (oddly enough) works great in IE and even firefox! Obviously, there is only one way for you see the issue and that is to view the page in Safari (I'm using 2.0 - 412.2, btw). So, screenshots or visiting the page from any other browser won't help. Thanks in advance if you can help! I have a table which has three rows of one cell each. I have specified the height of each cell by a class referring to an external stylesheet. There are two other classes which may be relevant, one in an internal stylesheet, and one referring to the same external stylesheet. In Firefox and Internet Explorer 5.2 (the latest available for the Mac, as far as I know), these cells are displayed correctly, but in Safari, they cut off at the bottom of the text in the box, and are therefore not the correct height. Can anyone help me correct this, please? This is the code: Code: <STYLE TYPE="text/css" MEDIA=screen>
<!-- .rbc { color: white; background-color: maroon; } -->
</STYLE>
<tr class="rb2">
<td class="rbc">
<div class="squash">some text<br /></div>
<div class="squash">some more text<br /></div>
<div class="squash">yet more text<br /></div>
<div class="squash">guess what? some more text!<br /></div>
</td>
</tr>
This is the CSS: Code:
.rb2 {
height: 133px;
vertical-align: top;
}
.squash {
line-height: 85%;
}
There are other differences, all with Internet Explorer not behaving properly, but I'll do one question at a time, or it'll get confusing! Thanks in advance. Hey everyone, I have a site I'm working on for a charity hosted he apoctrack . com/craftsforacause I'm using Dreamweaver and the included Spry framework to render the tabs, and everything seems to be working fine in Firefox, but the background won't render correctly in Safari. Help!? The stylesheet is he url above with /index.css An older version of the site worked fine in both Safari and Firefox, and I've compared the code but found nothing... The old site is he url above /index_classic.html and /index_classic.css Any help would be appreciated! Thx in advance... Well... sorry about the poorly formatted url but the anti-spam rules seem to mean I must post 5 useless posts in order to post anything of substance (with a url). So yeah. I did a diff on the stylesheets but that's hard to post here, so I can try if it'd be useful. Prolly easier to run it urself it it'd be helpful. Nothing useful came up when I tried it. Same for the html pages themselves. Was hoping someone could help me with a problem I'm having with margins on this site robertehowarddirectory.com/viewcat.php?category=Art In safari, the margins between each of the "featured" listings is 30px when it should be 8 (4 on the top of each listing, and 4 on the bottom). This jacks up the layout of the site, pushing the featured listings too low, as you can see. IN IE 7, 8 and Firefox, I have no problems, and the site displays fine. Would appreciate any help on this issue, as I've been trying to solve the problem but have not found a solution. Thank you. hi all, having a problem with browser compatibility here... 3 lousy pixels makes the difference between one of my divs being knocked to another row in safari, vs. a perfect lineup in IE. have a look: http://www.offsitedbs.com the column at the bottom entitled "security" is a big div that gets knocked to another row in safari if i try to have it line up perfectly in IE (pc)... BUT, if i knock the width back a few pixels to line it up in safari, it's not flush in IE. code for the divs: <div class='bottomDiv'> <div class='bottomTitle'><img src="IMAGES/arrow.gif">Remote Services</div> <p class='bottomDesc'>Offsite Database Administration and Offsite Server Management.</p> <p class='bottomText'>At Offsite DBA Services we focus ... any potential problem.</p> </div> <div class="bottomDiv"> <div class='bottomTitle'><img src="IMAGES/arrow.gif">Onsite Services</div> <p class='bottomDesc'>OffSite offers a free comprehensive report on the state of your database at no extra cost to your company.</p> <p class='bottomText'>We take ... its optimal level.<br></p> </div> <div class="bottomDiv"> <div class='bottomTitle'><img src="IMAGES/arrow.gif">Security</div> <p class='bottomDesc'>Offsite DBA Services uses the latest SSL technologies to manage your database through secure connections and proven technologies.</p> <p class='bottomText'>Network technologies ... from snoops.<br></p> </div> and the css for the 'bottomdiv's: .bottomDiv { background-color: #F0F0F0; height: 262px; width: 193px; float: left; border-left: solid 1px #FFF; border-bottom: solid 1px #FFF; background-image:url(../IMAGES/bottomBG.gif); background-repeat:repeat-x; background-position:bottom; border-top: solid 1px #FFF; padding: 0px; vertical-align: top; } any & all help is very appreciated! thanks, nunzio Hi guys.. I have a script that spits out a series of divs.. The first 'wrapper' Div is position:relative, and I have placed other divs inside it, positioning them using position: absolute; left: 20px, etc... It renders perfectly on all my tested browsers, and yet when I make the script repeat, so that each div-set is loaded from the database, they just stack on top of each other on the page, rather than underneath each other.. All I am really doing is stacking divs, I thought that whatever went on in the 'child' divs didnt affect the parents ?? Like so: Code: <div style="position: relative;">
<div style="position: absolute; left: 20px; top: 40px;">
some content
</div>
<div style="position: absolute; left: 150px; top: 40px;">
other content
</div>
</div>
Ive tried setting things like display: block;, clear: both, etc, but the sets of divs just 'pile' on top of each other... Any ideas :/ Many thanks, Mike. I am trying to get a 2 column layout to work across all browsers and I ran into a strange problem with center in Safari (or what Safari looks like according to the screenshot at http://www.snugtech.com/safaritest/) The page aligns correctly in my version of IE and Firefox. What I want to happen is for the table to center in the content div "image_block." In Safari the table is centering inside the container div "container" and sometimes behind the float right div "thumb_block." you can see it live at link here is the code Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>images</title>
<BASE href="http://jasonhalac.com/picture_gallery/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/imagerollover.css" rel="stylesheet" type="text/css">
<link href="images.css" rel="stylesheet" type="text/css">
</head>
<body">
<div id="top_image">
</div>
<div align="left" id="list_tabs">header content</div>
<div id="container">
<div id="thumb_block">
thumb block float right fixed width
thumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width widththumb block float right fixed widththumb block float right fixed widththumb block float right fixed width</div>
<div id="image_block">
<p>image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block</p>
<table width="200" border="1" align="center">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>test</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p>
image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image block image blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage blockimage block</p>
</div>
</div>
<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>
</body>
</html>
and css Code:
#container{
margin: 0px;
border: 0px;
height: 600px;
width: 915px;
}
#thumb_block{
width: 310px;
margin: 0px;
padding: 0px;
float: right;
}
#image_block{
margin: 0px;
padding: 15px 0px 0px 0px;
}
|
|||||||