Help & FAQs    Search BCF    Members    Groups    Events Calendar
Resend my activation email : Register : Log in 
BCF: Bike Chat Forums


Css help needed. Sidenote: Microsoft are stupid.

 Reply to topic
Bike Chat Forums Index -> The Geek Zone
View previous topic : View next topic  
Author Message

Gazdaman
I did a trackday!!!



Joined: 12 Aug 2004
Karma :
PostPosted: 18:26 - 08 Feb 2006    Post subject: Css help needed. Sidenote: Microsoft are stupid. Reply with quote
As you can see on the attatched pic, the top one is i.e 6 the lower one is firefox.

The view in firefox is pretty much correct. But on the internet explorer one. It has made one of my divs about 20px high. When the height is clearly set at 100%.

It shows fine in firefox. Also with microsoft being the wankers they are measuring widths from different places the layout also doesn't quite match up properly.

The matching up I can fix. But how can I get the big background div to show? It should show below the content box, as it does in firefox. I've tried setting min-height, I've tried putting other divs inside it. Internet explorer is a giant pain in the ass!

You'll also notice the sidebox have a black outline around them on the lower screenshot, that's because there's a slightly bigger box behind it with a black background. This isn't shown on the i.e one because it's really small and completely behind the side bars..


Gaz
 Back to top
View user's profile Send private message Send e-mail Visit poster's website You must be logged in to rate posts

FreshAL
Sir Crashalot



Joined: 04 Jul 2005
Karma :
PostPosted: 18:49 - 08 Feb 2006    Post subject: Reply with quote
upload the source, can't really tell just by looking at pics. There's about a million different ways you could be doing that
 Back to top
View user's profile Send private message Send e-mail You must be logged in to rate posts

FreshAL
Sir Crashalot



Joined: 04 Jul 2005
Karma :
PostPosted: 18:50 - 08 Feb 2006    Post subject: Reply with quote
oh yeah, if you havn't found it already this site is brilliant

https://www.w3schools.com/css/

specifically https://www.w3schools.com/css/css_reference.asp
 Back to top
View user's profile Send private message Send e-mail You must be logged in to rate posts

Gazdaman
I did a trackday!!!



Joined: 12 Aug 2004
Karma :
PostPosted: 19:05 - 08 Feb 2006    Post subject: Reply with quote
CSS

Code:

BODY {background: #2B2B2B; margin: 0px;}
A:link {color: #CDCDCD}
A:visited {color: #B3B3B3}

H1 {
font-size: 10pt;
font-family: arial;
font-weight: normal;
color: #2B2B2B;}

H2 {
font-size: 12pt;
font-family: arial;
font-weight: bold;
color: white}

H3 {
font-size: 10pt;
font-family: arial;
font-weight: bold;
color: white}

H4 {
font-size: 12pt;
font-family: arial;
font-weight: normal;
color: white}

H5 {
font-size: 10pt;
font-family: arial;
font-weight: normal;
color: white}

img { border-width: 0px }

div.main {
border: 0px;
padding: 0px;
margin: 0px;
left: 50px;
right: 50px;
color: #fff;
width: 1050px;
height: 100%; }

div.header-top {
position: absolute;
width: 1050px;
border: 0px;
padding: 0px;
margin: 0px;
height: 20px;
margin-top: 0px;
right: 50px;
left: 50px;
background-image:url('images/tabbak1.gif'); }

div.header-logo {
position: absolute;
width: 1050px;
border: 0px;
padding: 0px;
margin: 0px;
height: 95px;
right: 50px;
left: 50px;
background: #404040;
text-align: center; }

div.header-bottom {
position: absolute;
width: 1050px;
border: 0px;
padding: 0px;
margin: 0px;
height: 20px;
right: 50px;
left: 50px;
top: 115px;
background-image:url('images/tabbak1.gif');  }

div.content-bg {
position: absolute;
top: 135px;
height: 95%;
left: 50px;
width: 1050px;
border: none;
background-color: #383838; }

div.left-menu {
position: absolute;
height: 90%;
top: 135px;
left: 50px;
width: 200px;
float: left;
border: none;
border-width: 0px;
border-color: #2B2B2B;
background-color: #000; }
 
 div.left-menu-links {
position: absolute;
height: 98%;
top: 1px;
margin-bottom: 5px;
left: 3px;
width: 180px;
padding: 5px;
border: solid;
border-width: 2px;
border-color: #2B2B2B;
background-color: #404040; }

   div.link-box {
position: relative;
top: 0px;
left: -1px;
width: 168px;
padding: 5px;
border: solid;
border-width: 2px;
border-color: #595959;
background-color: #2B2B2B; }

div.content {
position: absolute;
top: 135px;
width: 624px;
border: solid;
padding: 10px;
margin-left: 250px;
margin-right: 250px;
border-width: 3px;
border-color: #2B2B2B;
background-color: #595959; }

div.right-menu {
position: absolute;
height: 90%;
top: 135px;
right: 33px;
width: 200px;
border: none;
border-width: 3px;
border-color: #2B2B2B;
background-color: #000;}

 div.right-menu-links {
position: absolute;
height: 98%;
top: 1px;
margin-bottom: 5px;
right: 3px;
width: 180px;
padding: 5px;
border: solid;
border-width: 2px;
border-color: #2B2B2B;
background-color: #404040; }

   div.link-box {
position: relative;
top: 0px;
left: -1px;
width: 168px;
padding: 5px;
border: solid;
border-width: 2px;
border-color: #595959;
background-color: #383838; }


HTML

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>
   <title>Gaz-racing.co.uk - Motorcycle trackday reports/Rebuilds</title>
<link rel="stylesheet" href="gaz-racing.css" type="text/css" />
 </head>

<body>
<div class="main">
<div class="header-top"></div><br>
<div class="header-logo"><img src="images/logo.jpg" alt="gaz-racing logo" /></div><br />
<div class="header-bottom"></div><br>
<div class="content-bg"></div>
 <div class="left-menu">
   <div class="left-menu-links">
      <div class="link-box">link 1
      </div>
      <div class="link-box">link 2
      </div>
      <div class="link-box">link 2
      </div>
      <div class="link-box">link 2
      </div>
      <div class="link-box">link 2
      </div>
      <div class="link-box">link 2
      </div>
      <div class="link-box">link 2
      </div>
      <div class="link-box">link 2
      </div>

   </div>
 </div><br>
<div class="right-menu">
   <div class="right-menu-links">
      <div class="link-box">link 1
      </div>
      <div class="link-box">link 2
      </div>
      <div class="link-box">link 2
      </div>
      <div class="link-box">link 2
      </div>
      <div class="link-box">link 2
      </div>
      <div class="link-box">link 2
      </div>
      <div class="link-box">link 2
      </div>
      <div class="link-box">link 2
      </div>
   </div>
</div><br>
<div class="content"><p>Lots of text which all has spaces and aren't stupidly long words that might spread my div out across whatever.</p></div>
</div>

</body>
</html>
 Back to top
View user's profile Send private message Send e-mail Visit poster's website You must be logged in to rate posts

Gazdaman
I did a trackday!!!



Joined: 12 Aug 2004
Karma :
PostPosted: 19:16 - 08 Feb 2006    Post subject: Reply with quote
The div with the main problem is content-bg.

although left-menu and right-menu aren't displaying correctly either

Gaz
 Back to top
View user's profile Send private message Send e-mail Visit poster's website You must be logged in to rate posts

Dom
World Chat Champion



Joined: 06 Sep 2004
Karma :
PostPosted: 19:53 - 08 Feb 2006    Post subject: Reply with quote
Regarding the '100% height' issue, CSS isn't that simple when it comes to specifying a % height. What I would suggest would be a 'faux columns' based design which basically consists of setting a background image for the <body> tag which contains say a 1px high image which is centered on the page and looks like columns.

Sorry if I'm not very clear, I'm not entirely with it atm. Have a look at this link, and hopefully it will help: https://www.alistapart.com/articles/fauxcolumns/

For an example on a site I've done have a look at www.just*removethis*ski.net . The column at the right side of the page is only as high as its content, but the <body> background image is basically the background image for that column, aligned to the right of the page and repeating vertically. The image: www.just*removethis*ski.net/wp-content/themes/justski/images/sobg.gif

HTH... it probably doesn't but I'll have another go when I'm more awake. Laughing
____________________
Photos and that
 Back to top
View user's profile Send private message Send e-mail Visit poster's website You must be logged in to rate posts

Gazdaman
I did a trackday!!!



Joined: 12 Aug 2004
Karma :
PostPosted: 19:59 - 08 Feb 2006    Post subject: Reply with quote
I'd be quite happy for that div to be the height of its content, but when I put the other divs inside it especially the content div, it actually disappears in i.e...

And then I'd have to go ahead and redo all my positioning because it'd be relative to that div rather than the canvass.

Gaz
 Back to top
View user's profile Send private message Send e-mail Visit poster's website You must be logged in to rate posts

Dom
World Chat Champion



Joined: 06 Sep 2004
Karma :
PostPosted: 21:37 - 08 Feb 2006    Post subject: Reply with quote
Personally, if that was my design I would not be coding it with absolute positioning or using any height attributes whatsoever, with the exception of height="Xpx" for the header bar.

All you need is a container div which is as wide as you want the overal design to be (% or px, or any other unit that takes your fancy), and for it to have the values margin: 0 auto which will then give you a centred block of X units wide.

I would then create 3 more divs. One being #left, one being #content and one being #right. I would set the #left div to say 100px wide and float: left. Then the #right div to 100px wide and float it to the right. Then for the #content div I'd just float either to the right or left with a width which would then fill in the centre area. This would be a lot less code and much more cross-browser friendly than your current setup, as well as having the benefit of being more or less dynamic to the content (absolute blocks will never move, so content can overlap, with some ugly results).

I haven't tested this code, but here's a rough idea of the way I'd do it and I know to be fine in all modern browsers:

HTML:
Code:

<div id="container">
  <div id="heading"><h1>My Website</h1></div>
  <div id="leftsection">Links, whatever, here.</div>
  <div id="content">Content with however many subsections you like could go here.</div>
  <div id="rightsection">Right section here.</div>
</div>


CSS:
Code:

#container {
   width: 800px;
   margin: 0 auto;
}
#heading {
   width: 100%;
   height: 200px;
}
#leftsection {
   width: 150px;
   float: left;
}
#content {
   width: 500px;
   float: left;
}
#rightsection {
   width: 150px;
   float: right;
}


Code like that or similar should achieve a 3 column design with a header, like yours, and be compatible with whatever you throw at it. If you were after a 'fluid' design as opposed to 'fixed' then some code changes would be needed, but nothing too severe.
____________________
Photos and that
 Back to top
View user's profile Send private message Send e-mail Visit poster's website You must be logged in to rate posts

Gazdaman
I did a trackday!!!



Joined: 12 Aug 2004
Karma :
PostPosted: 22:06 - 08 Feb 2006    Post subject: Reply with quote
appreciated my friend.

I suspected I was probably doing something wrong. I was trying to mimic my design on the current www.gaz-racing.co.uk as closely as I could, including the various shades and subset tables.

Gaz
 Back to top
View user's profile Send private message Send e-mail Visit poster's website You must be logged in to rate posts

Gazdaman
I did a trackday!!!



Joined: 12 Aug 2004
Karma :
PostPosted: 22:57 - 08 Feb 2006    Post subject: Reply with quote
CSS is such a stupid language.

You float something right, why the hell doesn't it go right!!! Why the hell would it sit like 3 pixels in from the right!! And then why the hell does the content bar not sit where the hell you tell it to!!

And then when you make the content bar bigger to push the right box over, it drops down a line before even coming flush with the right side!!

This would never happen with tables.

Gaz
 Back to top
View user's profile Send private message Send e-mail Visit poster's website You must be logged in to rate posts

Dom
World Chat Champion



Joined: 06 Sep 2004
Karma :
PostPosted: 10:17 - 09 Feb 2006    Post subject: Reply with quote
Gazdaman wrote:
CSS is such a stupid language.

You float something right, why the hell doesn't it go right!!! Why the hell would it sit like 3 pixels in from the right!! And then why the hell does the content bar not sit where the hell you tell it to!!

And then when you make the content bar bigger to push the right box over, it drops down a line before even coming flush with the right side!!

This would never happen with tables.

Gaz


Tis all just practice. Thumbs Up For debugging purposes you could set all of the sections to have a border, just to see what's where. In most/all browsers (I forget) you will find if the boxes add up to 100% of their container's width and then have a border on top, they will drop down to underneath as the browser sees 100% width plus a 1px border, ie over 100%. That is also the case with padding - if you wanted 20px of padding (left and right) on your left section, for instance, you would set the width to -40px than it was originally.

As far as a 3px from the right problem, make sure the container itself has no padding, aside from that I'm not sure what to suggest.

If you use Firefox then these are 2 very handy dev tools:
https://chrispederick.com/work/webdeveloper/
https://www.karmatics.com/aardvark/

There is also a developer toolbar for IE these days but in my experience it's a pain to work with so I tend to just put temporary borders on things if I need to debug in IE.
____________________
Photos and that
 Back to top
View user's profile Send private message Send e-mail Visit poster's website You must be logged in to rate posts

Gazdaman
I did a trackday!!!



Joined: 12 Aug 2004
Karma :
PostPosted: 12:02 - 09 Feb 2006    Post subject: Reply with quote
Yeah I put the borders on.

It's just annoying, everyone's harking on about how great CSS is, when it's completely true. I would be having none of these problems nor browser compatibility issues with tables.

But I shall persevere, albeit with much swearing.

Gaz
 Back to top
View user's profile Send private message Send e-mail Visit poster's website You must be logged in to rate posts

Dom
World Chat Champion



Joined: 06 Sep 2004
Karma :
PostPosted: 12:07 - 09 Feb 2006    Post subject: Reply with quote
If you're semi-serious about web design it's definitely worth it though, especially if you're looking for a job in the field. Although there are always bugs to be ironed out with all but the smallest projects, it does get a lot easier as you get used to it all, and you will find it as easy as tables in the end. Thumbs Up
____________________
Photos and that
 Back to top
View user's profile Send private message Send e-mail Visit poster's website You must be logged in to rate posts

Suzuki
Roger



Joined: 03 May 2005
Karma :
PostPosted: 12:09 - 09 Feb 2006    Post subject: Reply with quote
FWIW, I believe the problem you had at the top of this threat was due to the IE Box Model Bug.

Do a few googles for "Box Model Hack" Smile
____________________
<Simple> no I'm shaven Jon Razz
<Simple> it is a big enough hole.. I'll leave it now
Ride: 1999 Suzuki GSXR600 (yellow/black) IRC: Stats - Relationship Map
 Back to top
View user's profile Send private message Send e-mail Visit poster's website You must be logged in to rate posts

Gazdaman
I did a trackday!!!



Joined: 12 Aug 2004
Karma :
PostPosted: 12:11 - 09 Feb 2006    Post subject: Reply with quote
I know I.E measures widths from outside the border, whereas everything else (including W3C) measures it from inside the border, and I can get around that, not a huge problem.

It's the height of the box being tiny in i.e but the right size in everything else that's a pain.

Gaz
 Back to top
View user's profile Send private message Send e-mail Visit poster's website You must be logged in to rate posts
Old Thread Alert!

The last post was made 18 years, 107 days ago. Instead of replying here, would creating a new thread be more useful?
  Display posts from previous:   
This page may contain affiliate links, which means we may earn a small commission if a visitor clicks through and makes a purchase. By clicking on an affiliate link, you accept that third-party cookies will be set.

Post new topic   Reply to topic    Bike Chat Forums Index -> The Geek Zone All times are GMT + 1 Hour
Page 1 of 1

 
 You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum

Read the Terms of Use! - Powered by phpBB © phpBB Group
 
Debug Mode: ON - Server: birks (www) - Page Generation Time: 0.10 Sec - Server Load: 0.27 - MySQL Queries: 13 - Page Size: 101.91 Kb