CSS FAQ
- Why are my images not contained within their parent div (in FF)?
- How do you show which page you're on (in a menu)?
- What's the difference between 'class' and 'id'?
- How do I get rid of the gap under my image?
- Why are there gaps above and below my form in IE?
- I made a 10px-high div, but IE makes it 20px high...
- How do I make my div 100% height?
- How do I centre my page?
- How do I get my footer to sit at the bottom...?
- How do you target a certain browser?
- How can you set a minimum width for IE?
- Why doesn't 'vertical-align' work?
- Where did my image go?!?
- How do I get rid of the (blue) border around image links?
- How do you make a whole div into a link?
- How do I have links of different colours on the same page?
- How do you make a tooltip that appears on hover?
- Why does my content shift to the left on some pages (in FF)?
- How do I make a gradient with CSS?
- How do you get your background to stay fixed like that?
... and non-CSS questions :
- How do you have an external file (like a menu) on every page?
- I'd like a different image depending on the time of day...
- How do you have something random - like a random background?
- And how about a set of rotating links, where one is an image?
- How do you open a link in a new window?
- How do you open two new windows?
- Some select boxes go to a link when selected. How's that done?
- How do you get the little icon in the browser's address bar?
- I want to automatically re-direct users to my new address.
- How do you set and read a cookie?
Why are my images not contained within their parent div (in FF)?
You need to clear the floats.
How do you show which page you're on (in a menu)?
Funny you should ask - my 'Showing current page' page tries to answer that question.
If PHP is not available to you, you could use the cascade. Put an id in your body tags and an id in each of your 'a' tags for the links.
Let's say on page one you have this:
CSS
<body id="page1">
....
<a id="page1link" href="page1.htm">page one</a>
...
</body>
In your CSS, you can have something like this:
CSS
#page1 a#page1link {
color:purple;
}
What's the difference between 'class' and 'id'?
As a person, you may have an ID card - a passport, a driving license or whatever - which identifies you as a unique individual. It's the same with CSS. If you want to apply style to one element use 'id' (e.g. <div id="myid">). In the stylesheet, you identify an 'id' with a '#' ie. '#myid'...
As a person, if you are in a class, you are one of many. It's the same with CSS. If you want to apply the same style to more than one element, use 'class' (e.g. <div class="myclass">). In the stylesheet, you identify a 'class' with a '.' ie. '.myclass'...
If id's are more restrictive than classes, then why not just litter your page with classes? Well, I think the main thing is that it's simply wrong. You don't put headings in 'p' tags - you use 'h1', 'h2', etc. You don't (or shouldn't) make a list by writing asterisks or the little divider bar ( | ) - you use list tags ('ol'/'ul' + 'li') . You don't say that your footer is part of a class of elements called 'footer' - that's just stupid - you can't have more than one footer - it can't be a class. Of course, practically, the effect is about the same - the rules are applied - but that's not the point - it's semantically wrong to do it that way... However, if you try to give more than one element the same id, you will have problems - so don't do it.
An element may have an id and a class, but that's usually not necessary. You can also give an element two classes if you need to - like this : class="class1 class2". It can be very useful. Needless to say, you can't give an element two id's.
Another difference is to do with power. You can give an element an id and a class, but if any of the properties of the two conflict, the id style will win. Ids are more powerful than classes.
One more useful thing about id's is that they can be used as a link reference. Many people still think that you need named anchors to make links within a page, but that's simply not true - in fact, the name attribute is deprecated in XHTML except for in forms. One example of using id's as link references is this page. There are no named anchors on this page - the questions at the top of the page link to the id's of the divs that the answers are in.
How do I get rid of the gap under my image?
Images are inline elements, which means they are treated in the same way as text. Most people kind of
know this - they know that if you use 'text-align:center' on an image it will be centred. What many people
don't realise is that this means you will have a gap underneath an image. This gap is for the descenders of letters like
j,q,p,y and g. To get rid of this gap you need to make the image block-level - like this :
CSS
img {display:block;}
One problem that this can cause is when you want to have a few images next to each other - if they are block-level, they won't be next to each other. To get around that, you can use float:left. Of course, this might present another problem - maybe you don't want the image to float left. In this case, you can use an unordered list like this :
CSS
ul, li {
list-style-type:none;
padding:0;
margin:0 auto;
}
ul {
width:150px;
}
li {
float:left;
}
HTML
<ul>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
</ul>
This will give us this :
If you do this, don't forget to clear the floats.
Just for reference, this is what it looks like without 'display:block' :
Why are there gaps above and below my form in IE?
A lot of the time, when you find gaps that you can't account for, they are due to the default styles of different browsers - especially the margins and padding. IE gives forms large top and bottom margins, while Firefox doesn't. It's like with lists - you'll find bigger padding and margins for lists in IE than in Firefox. Paragraph margins are different, as are the margins on heading tags (h1,h2, etc).
A good way to not get caught out by these problems is to set all margins and padding to zero at the top of your stylesheet and then add them as and when you feel the a need for them, in that way, any margins and padding will be the same in different browsers.
CSS
* {
margin:0;
padding:0;
}
I made a 10px-high div, but IE makes it 20px high...
Yeah - pain in the arse, isn't it?
This problem sometimes comes up when you make a div just to contain the bottom border of a box, or something like that. In this situation, there's no text in the div, but IE won't let the height of the div be smaller than the line-height (which usually depends on the font-size). The answer is to set the font-size to zero, reduce the line-height, or use 'overflow:hidden;'.
CSS
#oneway {
font-size:0;
}
#anotherway {
line-height:0;
}
#yetanotherway {
overflow:hidden;
}
How do I make my div 100% height?
You need to know what the 100% is of, so the parent div must have a height set. One problem that people often come up against is making the main page fill the screen if there's little content. You can do that like this :
CSS
body, html {
height:100%;
}
body {
margin:0;
padding:0;
}
#wrap {
position:relative;
min-height:100%;
}
* html #wrap {
height:100%;
}
Here, the #wrap div goes around your whole page - it's like a sub-body.
You need to use 'min-height' rather than 'height' for Firefox because otherwise it will set it to 100% of the viewport and no more. Internet Explorer, being well... crap, treats 'height' as it should be treating 'min-height' which it doesn't recognise. You can target IE6 by preceding your code with ' * html ' or target all IE versions by using conditional comments.
To make floated divs within this #wrap div 100% of the #wrap div... well that's more difficult. I think the best way is to use the 'faux columns' technique which basically means that you put the background in your body rather than your columns. If the body has columns and your floats don't then it looks like your floated content is in a column that stretches to the bottom of the page. I've used this technique in my layout demos.
The problem is often not that the columns aren't 100% height, but that they're not equal lengths. Columns usually don't start from the top of the page and end at the bottom - there's often a header and a footer or sometimes, more interesting designs don't have a recognisable columnar layout, but do require div boxes to be equal heights. This can be done with the aid of a couple of images and some css or with some javascript.
This leads to more questions like...
How do I centre my page?
This is very easy. If we take the code in the last question and change it to this :
CSS
you get a page that fits an 800x600 resolution screen without a horizontal scrollbar, which will be centred
at higher resolutions.
body, html {
height:100%;
}
body {
margin:0;
padding:0;
}
#wrap {
position:relative;
width:780px;
margin:auto;
min-height:100%;
}
* html #wrap {
height:100%;
}
To vertically-centre a whole page, Paul O'Brien's demo uses CSS table display properties and a hack for IE, which is crap (IE that is - not the hack).
After that...
How do you target a certain browser?
IE6 can be targetted by preceding your properties with '* html'. For example...
#nav {
position:fixed;
}
* html #nav { /* this will target IE */
position:absolute;
}
Another way to target IE is with conditional comments. Put this (below) in the head - just before the closing tag - and put anything you want to be directed only at IE in another stylesheet.
<!--[if IE]>
<link href="ieonly.css" rel="stylesheet" type="text/css">
<![endif]-->
(More about IE conditional comments)
And if you're worried about Opera, this seems to work...
#nav {
position:fixed
}
@media all and (min-width: 0px){
#nav {position:absolute;} /* this should target Opera */
}
There's a huge list of possible CSS filters/hacks at centricle.
How can you set a minimum width for IE?
You probably know that to set a minimum width, the CSS property is 'min-width'. This can be very useful and works well in good browsers. However, our friends at Microsoft didn't bother telling IE about it, so IE doesn't understand 'min-width'. However, it has a proprietary property (try saying that three times fast after a few whiskies!) called 'expression' which allows us to feed it javascript via a stylesheet. Below is how we can set a (780px) minimum width for IE...
<!--[if gte IE 5]>
<style type="text/css">
body {
width:expression(documentElement.clientWidth < 780 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 780 ? "780px" : "auto") : "780px") : "auto" );
}
</style>
<![endif]-->
As the property is non-standard, it won't validate with the W3C validator, so if we put it in the head like this (above) - in an IE conditional comment - the validator will ignore it and the page will get a clean bill of health.
Why doesn't 'vertical-align' work?
It does - you're probably just misunderstanding what it does and how it works.
Below, there's a small demo of what 'vertical-align' does. You won't be surprised to hear that Firefox and IE give slightly different results.
This is what the specs say :
| Value: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit |
| Initial: | baseline |
| Applies to: | inline-level and 'table-cell' elements |
| Inherited: | no |
| Percentages: | refer to the 'line-height' of the element itself |
| Media: | visual |
| Computed value: | for <percentage> and <length> the absolute length, otherwise as specified |
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
The red border is an inline element.
Here's the same thing in a block-level element. You can see that 'vertical-align' is related to the line - not the div.
Often, when people have problems and think, "Why doesn't the vertical-align work?" what they really need is something else. Sometimes, they might need to use absolute positioning - like below. The green box is 'position:relative;'. The span is absolutely positioned within the box.
Other times, what's required is to set the line-height. Maybe there's a menu which is marked up as an unordered list... The list-items are block-level and if the height of the <li> is more than the line-height, the text will not be positioned in the centre of the <li>. So, if you make the line-height the same as the <li> height, you get what you want.
- This is without the
- line-height adjustment
- This is with the
- line-height adjustment
Where did my image go?!?
Sometimes, images just disappear. You put them in the html, upload the file to your server, and then check it in a browser and it's not there. More mysterously, when you check the source - it's not there either. This is usually because of some kind of ad-blocking software (often Norton). The most common cause seems to be naming your image 'banner.jpg'. After that, it could be the image size - certain dimensions are blocked as they are typical ad-banner sizes. So, if you come across this problem, try changing the name or size of your image.
Another thing that happens is when a background disappears - but only in IE. This has got something to do with IE's 'haslayout' property. MSDN's info says that 'position:absolute' returns true for 'haslayout', but I find that if you use 'position:relative' you'll get what you want.
How do I get rid of the (blue) border around image links?
Like this :
a img {
border:none;
}
How do you make a whole div into a link?
You can't put 'a' tags around a div, but you can do this with javascript :
HTML
<div onclick="javascript:location='http://bonrouge.com'" id="mydiv">
... stuff goes here ...
</div>
(I've added 'cursor:pointer;' to the CSS for the hand).
If you want to use an empty div with a background image as a link instead of putting your image into the html, you can do something like this:
CSS
#empty {
background-image:url(wine.jpg);
width:50px;
height:50px;
margin:auto;
}
#empty a {
display:block;
height:50px;
}
* html #empty a {
display:inline-block;
}
HTML
<div id="empty"><a href="#n"></a></div>
How do I have links of different colours on the same page?
This is bloody easy this is. I think if you don't know how to do this, you should spend some time at W3Schools.
Having said that... There are many ways to do this, but I think the best way is to use the cascade. I often see people
recommending people to use classes in their 'a' tags like this :
CSS
a.red {
color:red;
}
a.blue {
color:blue;
}
HTML
This is a valid way to do it, but usually, this isn't what a page looks like - two links next to each other
with different colours - it's usually something like a menu with one kind of link and main body text or
another menu with different links. In this (normal) situation, I think it's better to go higher up the cascade
to style the links. Something like this :
<a href="#" class="red">A red link</a>
<a href="#" class="blue">A blue link</a>CSS
a {
color:blue;
}
#menu a {
color:red;
}
HTML
<ul id="menu">
<li><a href="#">A red link</a></li>
<li><a href="#">A red link</a></li>
</ul>
<div id="content">
<p>There's <a href="#">a blue link</a> here.</p>
</div>
How do you make a tooltip that appears on hover?
The most simple way is to use the 'title' attribute like this...
HTML
<span title="Example of the title attribute in use">like this</span>
..or you can do something like this : Karl MarxAuthor of Das Kapital and The Communist Manifesto
CSS
a.tooltip {
position:relative;
cursor:help;
}
a.tooltip span {
display:none;
position:absolute;
top:1.5em;
left:0;
width:15em;
padding:0 2px;
}
a.tooltip:hover {
display:inline;
}
a.tooltip:hover span {
display:block;
border:1px solid gray;
background-color:white;
}
HTML
<a class="tooltip" href="#n">Karl Marx<span>-info goes here-</span></a>
Without this part... a.tooltip:hover {...it won't work in IE.
display:inline;
}
The "#n" in the link is to prevent the page from jumping to the top if the link is clicked (I got this idea from Stu Nicholls). The "href" part is necessary as it won't work in IE without it.
Why does my content shift to the left on some pages (in FF)?
That'll be the pages with more content? The ones that have a vertical scrollbar? If you look in IE there's probably a white space on the right where there would be a scrollbar if there were enough content to require one. In Firefox, the scrollbar appears when it's needed and the viewport becomes about 20px smaller, so the content seems to shift to the left when you move from a page with little content to one with lots of content. It's not a bug or something that needs to be fixed, but it does confuse and irritate some developers.
If, for some reason, you'd like Firefox to always have scrollbars - whether they're needed or not - you can do this :
CSS
html {
height:100.1%;
}
How do I make a gradient with CSS?
If you want a gradient for your background, you can make a 1px-wide, 600px-high (or however long you need the gradient to be) gradient image in the image editor of your choice, put it in the background of your body and repeat-x. Like this.
How do you get your background to stay fixed like that?
Here's how it's done on this page. (Notice the word 'fixed' at the end there).
CSS
body {
background:white url(myimage.jpg) no-repeat 65% 70px fixed;
}
...and non-CSS questions :
How do you have an external file (like a menu) on every page?
This is done with server-side scripting, which means that the server puts the code into the page before it reaches the browser. Some people use javascript to do this, but this is a bad idea as some people (about 10%) have javascript disabled, so a lot of people won't see anything - just an empty space.
The best way has to be with PHP. First check that your server supports php - most good commercial web hosts support php,
but you do come across a few that don't.
Then, save your pages with a .php extension (so instead of say 'mypage.htm' you have 'mypage.php'), save your menu (just the menu html - no
DTD, no 'body' tags - nothing but the html of the menu) as 'menu.php' (or menu.htm, menu.html or menu.txt)
and add this on every page in the place where you would normally have your menu :
<?php include 'menu.php'; ?>
(Here's what the manual says).
If your server doesn't support PHP you should be able to use SSI, which is a good alternative. Do the same thing - save your menu as... let's say 'menu.txt' and add this where you want your menu :
<!--#include virtual="menu.txt" -->
I strongly recommend using one of these - php if possible.
I'd like a different image depending on the time of day...
I'm no php expert, but I've answered this question a couple of times recently, so I thought I'd put this up...
This code :
PHP
... gives me the image (top right). My server is in Britain, so the times are based on British times.
To use this, just save your page with a .php extension and stick the code in where you'd like your image (and of course
change the image names and paths and the times).
<?php
$date = getdate();
$hour = $date['hours'];
if ($hour >= 7 && $hour <=14) {$pic='wine';} // 7am to 3pm show wine
if ($hour >= 15 && $hour <=22) {$pic='whisky';} // 3pm to 11pm show whisky
if ($hour >= 23 || $hour <=6) {$pic='beer';} // 11pm to 7am show beer
echo '<img class="fright" src="'.$pic.'.jpg" alt="'.$pic.'" />';
?>
How do you have something random - like a random background?
I think this is best done with PHP...
The code below - in the head of a page - gives us this page.
PHP
<?php
$images=array('wine.jpg','whisky.jpg','beer.jpg','whisky2.jpg','bg.gif','cbg.jpg');
$rand=rand(0,5);
$image=$images[$rand];
echo'<style type="text/css">
body {
background-image:url(images/'.$image.');
}
</style>';
?>
Here are a couple more examples of randomness...
And how about a set of rotating links, where one is an image?
How do you open a link in a new window?
Mark Kessell is an Australian-born physician who left medical practice to study art in New York where he now lives.
HTML
<a href="http://studiocyberia.com" onclick="return !window.open(this.href);">Mark Kessell</a>
How do you open two new windows?
You need a bit of javascript for this. Put this script in your head or add the function to your external .js file...
javascript
<script type="text/javascript">
function twoWindows (one,two) {
window.open(one);
window.open(two);
}
</script>
Your link would look something like this...
HTML
<a href="http://bonrouge.com" onclick="twoWindows('http://bonrouge.com','http://guardian.co.uk'); return false">bonrouge.com & The Guardian</a>
(Though I have no idea why you would want a link that opened this site and The Guardian at the same time.)
If javascript is disabled, the regular link will work and it will open up in the same window. (You won't see the second link, which is a shame as The Guardian is a fine newspaper).
Some select boxes go to a link when selected. How's that done?
Here's one way to do that:
HTML/javascript
<select onchange="window.location=this.value">
<option value="#n">...</option>
<option value="http://bonrouge.com">bonrouge</option>
<option value="http://google.com">Google</option>
<option value="http://prince.org">Prince</option>
</select>
Here:
How do you get the little icon in the browser's address bar?
The easiest way is to go here.
I want to automatically re-direct users to my new address.
If you have php available - most commercial servers have php installed - you can replace your old index page with this :
PHP
<?php header("Location: http://mynewaddress.com"); ?>
Just that - nothing else. Put it on a blank page by itself and save it as 'index.php'. Upload it and remove any other index page.
(An easy way to check if you have php available is to do this and see if it works - if it doesn't, your old host was a bit crap, so well done for moving).
Alternatively, you could use an html meta refresh. With this, you can make the page re-direct after so many seconds, so if you want the user to know that the she is being redirected, then you could use this:
HTML
<meta http-equiv="refresh" content="5;URL=http://bonrouge.com/">
Comments
#1 #2Nice one! I've only written two questions and I've got great feedback already. Cool.
I like it. Much easier to go throuugh than all the big tutorials. Kind of like a refresher course with tips and tricks.
Thanks.
Great, I have bookmarked this. You are targeting some problems that I took forever and a day to find out about - but I still can't get rid of the margin below my image, despite your advice. <:'( Bouhou, will read on...
Anuschka
Anuschka,
Can you contact me through my form? I'll see what I can do to help.
The SSI/PHP tip is excellent -- made my day!
Thank you! Bookmarked
Nice page, BonRouge !
I have one suggestion for the link on the whole div...
.blank {
width:100%;
height:100%;
border: none;
display:block;
}
and then :
<div><a class="blank" href="http://www.whatever.com"></div>
It works in all browsers... 
and this is very usefull when you're making a whole css design...
But your page is great, I learnt lots of things !!!
D'oh! I've been asleep... I've just noticed these latest messages...
Wayne,
Yeah, I think I saw you post that on a forum somewhere. I think it's an interesting idea. I don't usually use objects so I hadn't thought of that.
Thanks for pointing out the problem in the link - I've fixed it now.
Ness,
I think I see a problem with your idea there. Usually, people put things inside divs - like paragraphs and things. You won't be able to put a paragraph inside your 'a' tags there for the same reason that you can't put a div inside inside 'a' tags... You just can't.
Thanks all for the positive comments. I hope to keep adding stuff here, so... you know - come back some time.
How do I add my own question to the FAQ. For instance, How do I float a div to the right of an absolutely positioned div without having the absolutely positioned div disappear in IE? This works great in Firefox and Opera, by the way. But, I expect that about 90% of the people who see my site will use IE.
Daniel,
I'm afraid you don't add a question to the FAQ - this isn't a forum. For one thing, your question isn't a 'Frequently Asked Question'...
Contact me via my contact form and I'll see what I can do (don't write too much though as my form script is a bit dodgy and it sometimes gets screwed up - I've been meaning to fix it for ages, but I haven't had the time).
Now, I'm a bit concerned... Up there ^^^ it says Silje says :
I love it! I love it!
...and then there's a link to a page. Is this just spam? Is someone actually spamming this page? I checked the page and the author doesn't seem to have taken any notice of anything on this site.
So... 'To delete or not to delete? That is the question'.
For a designer with little coding skills, your tut helped a hell lot! I just hope everyone else writing css tuts make an effort to make those a bit designer friendly ;)
Great page bonRouge! well written and easy to understand; now i can have proper footers.. woohoo!
css gurudom here i come!
Rutam / css noob,
Thanks for the positive feedback. There's more I want to add to this, but it's not easy to find the time.
I'm glad you find it easy to understand - that was my hope with this page.
Keep up the good work already bookmarked this page for future ref. If you need any help with gfx/design do let me know; www.rutam.com
Thanks for writing this. The part on IE doubling margins on floats was a great find. Thanks again.
*Bookmarked*
I really like this page
Im a js fan and loved IE>css>expression and "return !window.open(this.href)" lol super
1. is IE>css>expression ok to use?
2. In "How do you make a whole div into a link?" why do you have "javascript:" in a onclick?
onclick="javascript:location='http://bonrouge.com'
Lakio,
1. Yes, but only in IE conditional comments - otherwise, it won't validate. It'll still work if it's in your regular stylesheet, but if validation's important to you, hide it.
2. I'm not sure to be honest... It's probably not necessary, eh?
This the most useful list of things CSS I've found. I was looking for info about gaps beneath images and found half a dozen other things which have been doing my head in too!
Huge thanks for reducing my stress levels so neatly
The php tips on menus was a real eye opener!
One question, I'm a bit of a novice on php, will the menu still be as search engine friendly as having <a href="" links on the page.
Sorry if that's a dumb question, as I said, I'm new to this.
Wish I'd found this site four months ago when I started, would have saved me loads of time
tankedup,
PHP, being a server-side language, includes whatever you want it to include before the page reaches the browser, so what you see in the browser is exactly the same as what a static html page shows. There is no SEO issue here.
This is by far one of the most informative pages regarding web development quick fixes on the internet. I have already bookmarked it and will inform many of my friends...thanks!
Excellent!!! Please keep adding!
Chris,
I will add more when I come across more things I consider to be 'frequently asked questions'... Right now, I can't think of any more.
I hold this site almost entirely responsible for teaching me how simple CSS design can be. I continue to send both newbies and seasoned designers here every day. It's a great asset to the web building community. Thanks, Bon Rouge!
Thank you for an excellent page!! IE6 has been making me feel a little older over the last couple of days.
Thanks for the PHP tips mate. Saved my life, you have (or at least my weekends, which amounts to the same thing). Sooner or later I'd probably have stumbled upon the info somewhere, but it's great to be taught things sometimes, rather than just grope around in the dark hoping for a lucky break. Cheers!
On your "Why does my content shift to the left on some pages (in FF)?" section you have height: 100.1%; I prefer to use 100.01% as .1 can sometimes cause a very slight bit of scroll action still, whereas 100.01% doesn't ;-)
Brilliant! Supremely useful, thanks!
for a popup window I use the following code for accessibility reasons this makes keyboard navigation possible as well as works with and without Javascript.
<a href="http://www.google.com" target="myName" onclick="javascript:return !window.open(this.href,this.target,'your other values here');" onkeypress="this.click();">link here</a>
Wow! A bunch of great tips here! You have managed to tap some very common and persistent problems that, for some reason, are hard to find good information on. Your explanations are clear and to-the-point. Kudos!
<strong>How do I make my div 100% height?</strong>
Some correction for this topic.
#WRAP{
height:100%
min-height:100%
position:adsolute /*relative starts at a relative position*/
left:0; /* in case of body padding*/
top:0;
z-index:300;/*optional*/
}
Just had to say "THANK YOU!!!" My horizontal nav items were positioned differently vertically in IE and FF, and your vertical-align information solved the problem for me.
really helpful code there. I was just wondering if you could help me at all. i am having problems with a dav. it is displayed correctly in forefox, but in IE it has a different height. the div is a vertical bar on the right hand side touching the horizontal nav at the top and to the footer at the bottom. in IE there is a space between the div and the footer. any ideas?? i would be so greatful if you could help. Thank you very much
your a fricking genius.. learnt so much! cheers dude
Great Page! i think I've read it a dozen times so far and the learning never stops!
It sounds dramatic, but I can't tell you how much you've positively and fundamentally changed the way I look at (and use) CSS. Thanks for all the hard work!
I have a question. I have a menu that changes slightly for each page of my website - it's really simple, the "tab" for the page visitors are on is highlighted when they're on it. Is it possible to use a SSI or PHP Include of a single, separate menu file to put the same menu on each of my pages, but have it recognize and change the "tab" of the page visitors are on?
Does that even make sense at all? I'm still fairly new to CSS and PHP, and a basic explanation would be much appreciated. Thanks again!
Joshua,
Thanks for the comments.
I think what you're talking about is explained here: http://bonrouge.com/~current2
I hope that helps.
Good stuff so far! What I really need to do, and the reason I came to your site, is to develop pages with 'frame-like' presentation. i.e. The contents 'frame' only to scroll and all others to remain fixed. The problem I have with 'fixing' the div is that by making the content 'frame' relative does not prevent it from scrolling through and over the header 'frame'. If you see what I mean? Thanks.
AWESOME!! nice informative site.
personal statement writing service <a href="https://papermethodist.com/ ">help in writing paper</a> hiring writer
essay word changer <a href="https://essaymeshing.com/ ">body paragraph essay</a> common app essay prompts
<a href="https://fildena.sbs/">buy fildena 150 online</a>
<a href="http://metoprolol.online/">lopressor 25 mg generic</a>
ร่วมสนุกสนานกับ SLOT ONLINEจากทางค่าย pgslot ที่กำลังเป็นที่นิยมสูงที่สุด ในปี 2022 game onlineซึ่งสามารถลงทุนและก็สร้างผลกำไรออกมาใช้ได้จริง สำหรับนักลงทุนที่สนใจร่วมสนุกสนาน สามารถลงทะเบียนกับทาง
เว็บตรงสล็อต ได้วันนี้
สมัครฟรีไม่เสียค่าบริการ ไม่ต้องโอนเงินก่อน เว็บตรงสล็อต เป็นแหล่งรวม
พีจีสล็อต แตกบ่อย ไว้มาก ซึ่งมีให้เลือกเล่นกว่า 100 เกมส์
100 รูปแบบสำหรับการเล่น แต่ละเกมเป็น สล็อตเว็บตรงไม่ผ่านเอเย่นต์ ลิขสิทธ์แท้ 100% ไม่มีการดัดแปลงแก้ไขหรือเปลี่ยนแปลงอัตราการออกเงินรางวัล นักลงทุนจะได้เล่นกับทางค่าย pg
slot โดยตรง ไม่ผ่านเอเย่นต์หรือตัวกลางใดๆก็ตาม แต่ละเกมมีเงินรางวัลมากมายก่ายกองให้ได้ลุ้นรับ ตั้งแต่รางวัลใหญ่ไปจนกระทั่งรางวัลเล็ก ผู้เล่นสามารถพนันแบบไม่มีระบุอย่างต่ำ
โดย พีจีสล็อต เว็บหลักของพวกเรานั้นผู้เล่นสามารถเล่นได้ทั้งคอมพิวเตอร์รวมทั้งมือถือ รองรับแพลตฟอร์ม IOS และก็ แอนดรอยด์ หรืออุปกรณ์ที่รองรับ HTML5
นักลงทุนสามารถลุ้นรับเงินรางวัลได้ตลอดระยะเวลา ไม่ว่าจะอยู่ไหน
ตัวเกมของ สล็อตพีจี ทำออกมาได้สนุกสนาน ด้วยตัวภาพที่ทำออกมาดีแล้วก็กราฟฟิค เสียงเอฟเฟกต่างๆทำให้นักลงทุนจะตื่นเต้นทุกการหมุนวงล้อ แล้วก็ด้วยอัลกิริทึมของตัวเกมที่จะมีการชำระเงินรางวัลแบบสุ่มและก็เป็นกลาง ผู้เล่นมั่นอกมั่นใจได้เลยว่าทาง พีจีสล็อต เว็บหลัก จะไม่มีการโกงอย่างไม่ต้องสงสัย ซึ่งผู้ที่ไม่เก่งภาษาอังกฤษก็ไม่ต้องวิตกกังวลไปว่าจะเล่นไม่เป็น ด้วยตัวเกม PG SLOT ที่รองรับการเล่นภาษาไทย ทำให้ไม่ว่าใครก็สามารถเล่นได้ กติกาไม่ยาก เพียงแค่หมุนวงล้อให้เครื่องหมายด้านในตัวเกมตรงกันแค่นั้น สามารถลุ้นรับรางวัลใหญ่ได้ทุกการพนัน ไม่ว่าจะพนันน้อยหรือเดิมพันเยอะ pgslot เว็บใหญ่ มีระบบระเบียบการฝากถอนอัตโนมัติที่เร็วไว
มีขั้นตอนที่ง่าย สามารถฝากถอนได้ด้วยตัวเอง ไม่จำเป็นต้องส่งสลิปให้แอดมิน ทั้งยังสามารถฝากถอนไม่มีขั้นต่ำได้อีกด้วย ซึ่ง 1 บาทก็สามารถถอนเงินได้ สล็อตเว็บตรงมีโปรโมชั่นมากไม่น้อยเลยทีเดียวให้เลือกรับ ดังเช่น
สมัครสมาชิกใหม่รับโบนัส
100%, สมาชิกใหม่รับโบนัส 50%, โปรวันเกิดรับโบนัส 50% รวมทั้งอื่นๆอีกมากมาย ซึ่งสมาชิกที่สมัครเข้ามาใหม่ก็ไม่ต้องกลัว สามารถยอมรับได้ตั้งแต่คราวแรกที่เริ่มเล่น
สล็อตpg เว็บหลัก ของเราเป็นแหล่งรวมเกม pg slot แตกง่าย โดยพวกเรามีเกมยอดนิยมดังเช่น Caishen Wins, Treasure
Of Aztec, Lucky Neko แล้วก็ฯลฯ พวกเราได้มีการจัดอันดับเกมสล็อตเว็บตรง แตกง่าย อยู่เสมอทุกๆเดือน สามารถเข้ามาอ่านได้ฟรีๆและสำหรับผู้ที่ยังเล่นไม่เก่งหรืออยากลองเล่นเกมใหม่ๆก็สามารถทดลองเล่นPG SLOT
จากทางเราได้ฟรีๆไม่ต้องฝากเงินเล่น เล่นสล็อตออนไลน์ได้ฟรี
พวกเราให้เครดิตสำหรับท่านที่อยากทดลองเล่นเกมสล็อตดูกร ไม่ว่าจะเพื่อศึกษาเล่าเรียนข้อตกลงหรือทดลองฟีเจอร์ต่างๆตัวเกมทดสอบมีระบบระเบียบการเล่นแบบเดียวกันหมดทุกอย่าง โดยทาง PG
SLOT เว็บหลัก นั้นได้เปิดให้บริการนักพนันได้เล่นอย่างไร้ข้อจำกัด ไม่มีทางหยุด ตลอด 24 ชั่วโมง เราได้เปิดทางทางเข้าเล่นให้นักลงทุนได้ร่วมสนุกหลายช่องทาง ไม่ว่าจะเป็นผ่านทางหน้าเว็บไซต์ GODBET789 หรือเล่นผ่านลิงค์ทาง youtube, tiktok, twiter หรืออื่นๆสามารถร่วมสนุกผ่านทางลิงค์ที่พวกเราติดไว้ได้ เล่นกับ สล็อตออนไลน์เว็บตรง ไม่มีอันตรายอย่างแน่แท้ 100% พวกเราคัดสรรค์เกม pg slot ยอดฮิตไว้ให้ผู้เล่นได้เล่นเยอะแยะ สล็อตPG
เว็บหลัก ของเรานักลงทุนสามารถเล่นได้เงินจริง 100% ทาง สล็อตเว็บตรงไม่ผ่านเอเย่นต์ ไม่มีประวัติการโกงเงินสมาชิกแม้กระทั้งครั้งเดียว มั่นอกมั่นใจได้เลยถ้าเกิดเล่นกับเรา ไม่ว่าจะเป็นแสนหรือเป็นล้านทางพวกเราก็จ่ายให้ครบทุกบาท
สล็อตPG นั้นเป็นเกมที่โบนัสออกบ่อย ปั่นเพียงไม่กี่ครั้งก็เข้า Freespins ได้แล้ว ไม่ค่อยเกลืออย่างไม่ต้องสงสัย พวกเรารับประกันได้ เว็บตรงของเรานั้นมีการอัพเดทให้สมาชิกได้เล่นเกม สล็อตPG มาใหม่อยู่ตลอดเวลา
สามารถเล่นได้ทันคนอื่นๆอย่างไม่ต้องสงสัย
เข้าเล่นได้ไหลลื่น ไม่มีกระตุกหรือกระเด้งออกอย่างแน่นอน สำหรับคนที่มีความวิตกกังวลว่าไม่มีบัญชีธนาคารแม้กระนั้นต้องการเล่นพีจีสล็อต ก็สามารถร่วมสนุกสนานกับทางเราได้ พวกเรารับการฝากถอนทรูวอเลทแบบไม่มีอย่างต่ำ สามารถฝากถอนได้อย่างง่ายดายแค่เพียงมีแอพกระเป๋าเงินทรูวอเลทแค่นั้น เชิญเข้ามาร่วมสนุกสนานกับเกมสล็อต pg เกมสล็อตออนไลน์รูปแบบใหม่ 3D เล่นง่ายได้เงินจริงแน่นอน 100% สิทธิพิเศษดีๆวันนี้สำหรับท่านที่ไม่เคยทราบจะเล่นเกมสล็อตเกมไหน ทางเรามีโปรแกรมสแกนpgslotให้ฟรี สามารถดูเปอร์เซ็นการแตกของเกมเราได้ มีอัตราความแม่นถึง 80-95% อย่างยิ่งจริงๆ แม้กระนั้นก็ต้องบอกไว้ก่อนว่าการเล่นเกมสล็อตให้ได้เงินจำเป็นต้องขึ้นกับดวงรวมทั้งเคล็ดลับของผู้เล่นด้วย แต่ว่าทางพวกเราค้ำประกันว่าถ้าเล่นได้เงินรางวัล สามารถถอนเงินออกมาใช้ได้จริงอย่างแน่นอน เกมสล็อตค่าย PG เว็บตรง
เว็บSLOT ONLINE ที่ให้บริการค่าย jili slot ที่กำลังมาแรงที่สุดในปี 2565 ในกรุ๊ปของนักการพนันให้
GODBET789 เป็น เว็บตรงไม่ผ่านเอเย่นต์เปิดใหม่ อันดับ 1 ในเรื่องของเกมสล็อตแตกหนัก รางวัลใหญ่
เราเป็นเว็บไซต์SLOTใหญ่ที่สุดในไทย มีความมั่นคงและยั่งยืนแล้วก็ปลอดภัย 100% พร้อมให้นักเสี่ยงโชคได้ร่วมบันเทิงใจกับ jili slot wallet เดิมพันได้อย่างไม่ยากเย็นแบบไม่มีขั้นต่ำ เบทเริ่มเพียง 1 บาทเพียงเท่านั้น พวกเรามีโปรสล็อตออนไลน์ฟรีเครดิตต่างๆจำนวนมากให้เลือกรับ นักลงทุนไม่มีความจำเป็นที่จะต้องมีทุนเยอะก็เล่นกับ เว็บตรงสล็อตออนไลน์ ได้ พวกเราให้โบนัสเพิ่มทุนไปปั่นเกมสล็อตง่ายๆ แค่เพียงเอาอย่างข้อตกลงของเรา หรือจะเล่นSLOTฟรีก่อนผ่านระบบทดลองเล่นสล็อต ซึ่งไม่จำเป็นต้องฝากเงิน ทดสอบเล่นได้ฟรี
มีเกมสล็อตให้ทดลองเล่นทุกเกมส์ ซึ่งทางเราจะให้เครดิตฟรีถึง 10,000 บาทเลยทีเดียว เปิดให้บริการนักเล่นการพนันได้ร่วมสนุกสนานกับ jili slot game ฟรีที่มาใหม่มาแรงที่สุดในยุคนี้ โดยเกม jili slot wallet ของพวกเรานั้นนักเสี่ยงดวงจะเล่นได้ง่ายสุดๆเนื่องแต่รองรับระบบภาษาไทย และก็ตัวเกมเป็นเว็บตรงสล็อต ของแท้ไม่ล็อคยูสเล่นง่าย
เป็นเกมสล็อตแตกง่ายๆ รางวัลหนักๆ อย่างไม่ต้องสงสัย เนื่องจากว่าเรานั้นเป็น เว็บสล็อตแตกง่าย
2022 ไม่ผ่านเอเย่นต์ ทำให้พวกเรามีโบนัสและก็เครดิตฟรีไม่อั้นให้กับผู้เล่น รวมถึงระบบการเล่นที่ล้ำยุคมากยิ่งกว่าเดิม ทุกคนจะได้เล่นSLOT ONLINEทุกค่ายในเว็บไซต์เดียว เล่นได้โดยไม่ต้องโอนเงินไปมา ใช้เพียงแต่กระเป๋าเงินเดียวแค่นั้น โดยทาง
เว็บตรง นั้นมีระบบระเบียบการฝากถอนไม่มีอย่างต่ำ เริ่มต้นที่ 1 บาท ไม่ว่าจะฝากหรือถอนก็สามารถทำรายการได้
ระบบฝากถอนของเรานั้นเป็นระบบอัตโนมัติ ที่มีความเที่ยงตรงรวมทั้งเร็วทันใจ
ใช้เวลาในการฝากเบิกเงินของท่านเพียงแต่ 15 วินาทีเพียงแค่นั้น แล้วต่อจากนั้นก็เล่นเกม jili สล็อต ได้ทันทีที่ปรารถนา
ไม่มีปัญหาเรื่องถอนเงินผิดอย่างแน่แท้ โดยทางเราได้รวบรวมสล็อตออนไลน์ให้เล่นมากกว่า 29 ค่ายเกมส์ เกมทุกเกมส์เป็น เว็บสล็อตแตกง่าย 2022 ไม่ผ่านเอเย่นต์
ของแท้ 100% อัดแน่นไปด้วยความสนุกและก็เงินรางวัลมากไม่น้อยเลยทีเดียว ห้ามเสียโอกาสดีๆกับเว็บไซต์สล็อต จากผู้ให้บริการอย่าง GODBET789.COM นักการพนันสามารถเข้าร่วมสนุกสนานได้ไม่ยากผ่านcomputerและPhone รองรับการเล่นทั้งยัง IOS และ Android สามารถเล่น
จิลิสล็อต ได้ผ่านทางหน้าเว็บได้โดยตรง ไม่มีความจำเป็นที่ต้องดาวน์โหลดอะไร เว็บพนันของพวกเรานั้นเป็นคาสิโนออนไลน์แบบครบวงจร ที่มีให้เลือกเล่นทั้ง สล็อตออนไลน์ , กีฬาออนไลน์ ,
เกมบาคาร่า , รูเล็ต ,
สลากกินแบ่ง , blackjack , โป๊กเกอร์ , เกมยิงปลา และฯลฯ
นักพนันสามารถร่วมสนุกกับทางพวกเราได้ เว็บตรงสล็อตจำกัดคนที่แก่มากกว่า 18
ปีบริบูณร์เพียงแค่นั้นถึงจะเล่นได้
โดยการเล่นกับเว็บตรงสล็อตออนไลน์ก็เพียงแค่ลงทะเบียนเป็นสมาชิกกับทาง
GODBET789.COM โดยมีขั้นตอนกล้วยๆดังนี้ 1.เข้ามาที่เว็บหรือแอดไลน์ 2.กรอกข้อมูลที่ระบบต้องการ 3.ล้อคอินและฝากเงินเข้าเล่นเกมได้ในทันที ขั้นตอนกล้วยๆง่ายต่อการสมัครเพียงเท่านี้ท่านก็จะได้ร่วมสนุกกับเกม สล็อต
jili ได้ทันทีไม่ว่าจะอยู่ไหน แค่เพียงหยิบโทรศัพท์ขึ้นมา เล่นกับเราได้เงินจริง ถอนเข้าบัญชีจริงของคุณอย่างไม่ต้องสงสัย
โดยเกมสล็อตแตกง่ายจากทางค่าย jili slot game นั้นมีอยู่เยอะแยะ ทางเว็บเดิมพันของเราได้ทำสถิติอยู่ในทุกๆเดือน สามารถเข้ามาอ่านบทความได้ฟรีๆเผื่อนักลงทุนที่ไม่เคยรู้ว่าจึงควรเล่นเกมไหน เล่นอย่างไรถึงจะได้เงิน สามารถเข้ามาเล่นตามๆกันได้ เรามีกลุ่มเสวนาในไลน์เอาไว้ให้ผู้เล่นได้เสนอแนะหนทางกัน
โดยวันนี้เว็บตรงไม่ผ่านเอเย่นต์ขอเสนอเกม jili game ที่เล่นง่ายๆได้เงินรางวัลเยอะแยะดังต่อไปนี้
ROMA X, Crazy HUNTER, Jackpot Fishing สามเกมนี้เป็น jili
slot gameยอดฮิตตลอดกาลที่มีคนเล่นมากไม่น้อยเลยทีเดียวที่สุด
ทุกคนที่ยังไม่มีSLOTในดวงใจสามารถเข้ามาลองเล่นตามๆกันได้ ทางเว็บตรงไม่ผ่านเอเย่นต์เปิดใหม่ของเราเปิดให้บริการทุกคนตลอด 24 ชั่วโมง เข้ามาร่วมบันเทิงใจและคลายความเครียดได้ทุกขณะที่อยาก สล็อต jili
Канал о бизнесе, мотивации, стартапах.
А также реклама для бизнеса в телеграм канале.
Делимся новостями бизнеса в РФ.
Подпишись, чтобы быть в курсе!!! Источники
бизнеса
Канал о бизнесе, мотивации, стартапах.
А также реклама для бизнеса в
телеграмм канале.
Делимся новостями бизнеса в России.
Присоединяйся, чтобы не потерять!
message9649
Канал о бизнесе, мотивации, стартапах.
А также реклама для бизнеса в телеграмм канале.
Делимся аналитикой бизнеса в РФ.
Присоединяйся, чтобы не потерять..
телеграм про бизнес
Hi there, just became alert to your blog through Google, and found that it is really informative.
I am gonna watch out for brussels. I will appreciate if you continue this in future.
Numerous people will be benefited from your
writing. Cheers!
ngentot
Superb blog! Do you have any hints for aspiring writers? I'm hoping
to start my own site soon but I'm a little lost on everything.
Would you suggest starting with a free platform like Wordpress or
go for a paid option? There are so many options out there that I'm totally confused
.. Any tips? Kudos!
ngentot
Hey there! I've been reading your website for some time now and finally got the courage to go ahead and give you a shout
out from Dallas Texas! Just wanted to say keep up
the fantastic job!
ngentot
When I initially commented I clicked the "Notify me when new comments are added" checkbox and now each time a comment is added I get
three emails with the same comment. Is there any way you can remove me
from that service? Thanks!
bokep
Piece of writing writging iis also a excitement, if you be acquainted with after that you can write
if not it is difficult to write. financial plan
Advertise your Social Media and Websites for Relieve!
YouLikeHits is a message joyride that leave facilitate you acquire your Mixer Media (Twitter, YouTube, VK, Pinterest, SoundCloud, Twitch, TikTok),
Websites and Sir Thomas More. It's uncomplicated
and Unblock! To produce started but add together your profiles and sites to YouLikeHits and commence ontogeny your online comportment!
Conjoin all over 3,000,000 early users! http://ylkhts.cc/?id=34318
скажем на жантильничать оформление сильно необходимых документов и доставим авто из ОАЭ под источник
Микрозаймы Россия
Вопреки на то, что кредит показывается шибким равно лучшим оружием резолюции денежных заморочек,
не все находят решение на этот шаг через сложности упражнения евонный оформления.
Взять Кредит Онлайн Альфа ([URL=https://america-dubai-auto.com]america-dubai-auto.com[/URL])
https://america-dubai-auto.com
cheap erectile dysfunction pill ed pills
For the reason that the admin of this website is working,
no hesitation very rapidly it will be well-known, due to
its quality contents.
fuck
For the reason that the admin of this website is working,
no hesitation very rapidly it will be well-known, due to
its quality contents.
fuck
For the reason that the admin of this website is working,
no hesitation very rapidly it will be well-known, due to
its quality contents.
fuck
For the reason that the admin of this website is working,
no hesitation very rapidly it will be well-known, due to
its quality contents.
fuck
Excellent page. Exactlty what I was looking for. Will be bookmarked once I get home.