|
 |
|
|
|
| Thread title: Need Help With XHTML/CSS |
 |
|
|
| |
|
Thread tools
Search this thread
Display Modes
|
|
|
01-22-2005, 08:32 PM
|
#1
|
Status: Member
Join date: Aug 2004
Location: Sacramento, CA
Expertise:
Software:
Posts: 275
|
 Need Help With XHTML/CSS
Hi, if anyone here is good with <div>'s, xhtml, and css and would like to help me out a little bit, please IM me @ StensonNet or MSN me @ shaq_is_stupid@hotmail.com
I'll go ahead and post me problem here as well though:
I've just started coding this really, but I've already run into a slight problem.
http://visualesq.com/clients/Forum66
Check the page in firefox and IE. It looks fine in firefox, but in IE I get this huge vertical margin above the header. If anyone knows of any solutions, please tell me!
Thanks,
Sam Stenson
|
|
|
|
01-22-2005, 08:43 PM
|
#2
|
Status: Member
Join date: Jan 2005
Location: Warrington, England
Expertise:
Software:
Posts: 285
|
Have you tried giving the container div a height value?
|
|
|
|
01-22-2005, 09:00 PM
|
#3
|
Status: Member
Join date: Aug 2004
Location: Sacramento, CA
Expertise:
Software:
Posts: 275
|
I don't think that will work because we never know how tall it will be in the end. Different ammounts of content will be added.
|
|
|
|
01-22-2005, 09:04 PM
|
#4
|
Status: Member
Join date: Jan 2005
Location: Warrington, England
Expertise:
Software:
Posts: 285
|
Well, when you add the content, that might fix the problem itself
|
|
|
|
01-23-2005, 05:00 AM
|
#5
|
Status: Member
Join date: Nov 2004
Location:
Expertise:
Software:
Posts: 115
|
Here's a version that works with both IE and FF.
I redone everything because a lot of what you did wasn't really needed.
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Forum66 - Simple Solutions For Your Website</title>
<style type="text/css" media="screen">
body {
margin: 0 auto;
text-align: center;
background: url(images/bg.jpg) repeat-x;
background-attachment: fixed;
font-family: Tahoma;
font-size: 10pt; /* I personally use pt instead of px for font, I believe it works better with font. */
color: #808080;
line-height: 12px;
}
p, li, ul, h1, h2, h3, img {
padding: 0;
border: 0;
margin: 0;
}
a, a:visited {
color: #808080;
text-decoration: underline;
}
/* Wrapper - Container */
#wrapper {
width: 760px;
background-color: #fff;
margin: 0 auto;
text-align: left;
}
/* Header */
#header_nav {
height: 39px;
background: url(images/tnav_bg.jpg) repeat-x;
}
.nav_home {
margin-left: 19px;
}
.nav_contact {
margin-left: 39px;
margin-right: 71px;
}
</style>
</head>
<body>
<!-- Wrapper / Container -->
<div id="wrapper">
<!-- Header Navigation -->
<div class="header_nav"><a href=""><img class="nav_home" src="http://www.visualesq.com/clients/Forum66/images/tnav_home.jpg" alt="" /></a><a href=""><img class="nav_contact" src="http://www.visualesq.com/clients/Forum66/images/tnav_cont.jpg" alt="" /></a><img src="http://www.visualesq.com/clients/Forum66/images/header_t.jpg" alt="" /></div>
<!-- Header Banner / Logo -->
<div class="header_banner"><img src="http://www.visualesq.com/clients/Forum66/images/header_main.jpg" alt="" /></div>
</div>
</body>
</html>
|
|
|
|
01-23-2005, 05:14 AM
|
#6
|
Status: Senior Member
Join date: Dec 2004
Location:
Expertise:
Software:
Posts: 845
|
|
|
|
|
01-23-2005, 06:39 AM
|
#7
|
Status: Member
Join date: Aug 2004
Location: Sacramento, CA
Expertise:
Software:
Posts: 275
|
You rule, Legendary. Thanks!
|
|
|
|
01-23-2005, 04:37 PM
|
#8
|
Status: The BidMaster
Join date: Nov 2004
Location: England
Expertise:
Software:
Posts: 10,821
|
Good job Legendary! 
|
|
|
|
01-24-2005, 04:29 AM
|
#9
|
Status: Member
Join date: Aug 2004
Location: Sacramento, CA
Expertise:
Software:
Posts: 275
|
Alright, I've pretty much finished the coding; you can view it here:
http://visualesq.com/clients/Forum66
However, I'm still having a few slight issues - all of which pertain to IE  First of all, if you'll look at the top of the main content section (the blue/grey beginning), you'll see that the background begins before the top image starts. The same goes for the bottom images of all the rest of the sections (below member login, both of the sub sections, and the bottom of the right column). Does anyone have a solution to this problem? It should be a fairly easy fix, I just don't know how 
EDIT - Oh yeah, does anyone know how to have equal distance between the two floating elements (left column and right column), in both browsers?! It's driving me nuts :mad:
|
|
|
|
01-24-2005, 05:20 AM
|
#10
|
Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:
Posts: 2,246
|
the nly thing i see screwing up is the right_b image, and for some reason i blame it on being inside the div.
you hasve it going
Code:
<div id="right">
<img src="*stuff*" />
</div>
the only way i've ever gotten an image to hug a div well in IE and FF was to put it outside the div, like so:
Code:
*note, this won't apply with your current css
<div id="right">
<img src="welcome.gif" alt="" />
<div id="rightbody">
your lipsum here
</div>
<img src="right_b.gif" alt="" />
</div>
i've had images with round corner hug both the top and the bottom of divs before, for menu boxes, or individual item slots and that's how i've done it al the time. if i remember correctly, it worked for both transitional and strict doctypes.
|
|
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
| Thread Tools |
|
|
| Display Modes |
 Linear Mode
|
|
|
Forum Contains New Posts 
Forum Contains No New Posts 
Forum is Closed