Learn VBA & Macros in 1 Week!

CSS - 3 Small Errors, Suggestions Welcome! (please ^_^)

Full Excel VBA Course - Beginner to Expert

3 Small Errors, Suggestions Welcome! (please ^_^)	View Content

Full Excel VBA Course - Beginner to Expert

Small Firefox Errors

Similar Tutorials

View Content

Am putting the finishing touches to my site but in firefox 8 the top of the side menu there is a space and login part is to low as well.

My site is www.carswapped.co.uk

Centering Suggestions?

Similar Tutorials

View Content

Hey, everyone!

I was wondering if someone could advise how I could vertically center this page using CSS. I'm trying to create the look of gotgosh dot com but in CSS.

Thank you!

Kyler

Here's the CSS code:

* {
margin: 0;
padding: 0;
}

body {
background: #666666 repeat-x;
color: #000000;
}

#center {
position: absolute;
width: 100%;
float: none;
}

#outercontainer {
width: 760px;
margin: 0 auto 0 auto;
}

#menu {
height: 70px;
background:#FF0000;
}

#container {
position: relative;
height: 500px;
overflow: auto;
border: 10px solid #FFFFFF;
background-color: #FFFFFF; }

#barst {
height: 20px;
width: 100%;
background: #00FF00;
}

#barsb {
height: 20px;
width: 100%;
background: #00FF00;
}

Here's the HTML code:

<head>

<title>enter title here</title>
<meta name="description" content=" " />
<meta name="keywords" content=" " />
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div id="center">
<div id="barst"> </div>
<div id="outercontainer">

<div id="menu">---- HEADER --- -----------------</div>
<div id="container">
<p>Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.
Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.
Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.
Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.
Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.<br />
<br />
Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.
Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.
Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.
Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.
Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet
libero. Vivamus massa mi, pharetra in, ultricies vitae,
vestibulum non, lectus. Nam quis ante ut nisl pharetra congue.
Praesent laoreet mi vitae nisi. Sed fermentum massa.</p>
</div>
</div>
<div id="barsb"> </div>
</div>

</body>
</html>

Similar Tutorials

View Content

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

Need Small Makeover Help

Similar Tutorials

View Content

Howdy folks. If you check http://www.clansunited.net/ and http://www.clansunited.net/phorum/read.php?55,20178,20178#20178 you will notice that it doesnt really appear as it should as in IE. Now there are 2-3 small minor errors left otherwise everything is valid.

How do I make the space between the menu and the rest of the site appear as in IE without messing it up in IE?

Any feedback is welcome.

Small Problem With Ie6

Similar Tutorials

View Content

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;
}

Issues With Small Div's In Ie

Similar Tutorials

View Content

So I made a test design for a site, which I uploaded for testing HERE.

The problem is that for a few borders to the navbar and such, an image needed to overlap them, so instead I made them very short div's and cut the image to fit inside the div, about 2px in height. Although this displays fine in firefox, in IE the small images do not show.

At first it looked even worse in IE, until I implemented overflow: hidden; to make the div shrink to its actual size.

Any recommendations? Is there a better way to do this, or an easy fix?

Thanks in advance

A Series Of Small Questions...

Similar Tutorials

View Content

Hello,

I couldn't think of a more appropriate title, so I apologize - but as it says, I have a series of small questions regarding my CSS layout and would be most grateful if someone could assist me.

I'll start with the biggest one. (See Image)

http://img379.imageshack.us/img379/9779/46432769lm3.png

As you can see, when viewing my layout in Google Chrome or Safari, everything in between the header and the footer gets caught on my top menu. I tried to correct it, but I am really unaware of the problem's source; if anyone knows I'd appreciate it.

The topmenu CSS is he
Code:

.topmenu {
  float:left; 
  padding:0; 
  margin:0;
  color: #FFFFFF;
  background: #0000A0 url(/menbg.png);
  width:898px; border:solid 1px #363636;
  clear:both;
} 


.topmenu  a, .topmenu a:visited {
  font-family:Arial, Helvetica, sans-serif;
  font-style:normal;
  font-weight:bold;
  font-size:12px;
  color: #FFFFFF;
  background: #0000A0 url(/menbg.png);
  text-decoration: none;
}


.topmenu ul {
  list-style-type:none;
  padding:0; 
  margin:0;
}


.topmenu ul li {
  float:left; 
  position:relative; 
  z-index:auto !important /*Non-IE6*/; 
  z-index:1000 /*IE6*/; 
  border-right:solid 1px #363636; 
}


.topmenu ul li a {
  color: #FFFFFF;
  background: #0000A0 url(/menbg.png);
  float:none !important /*Non-IE6*/; float:left /*IE-6*/; 
  display:block; 
  height:30px; 
  line-height:30px; 
  padding:0 10px 0 10px; 
  text-decoration:none; 
}


.topmenu ul li ul {
  display:none; 
  border:none;
  color: #FFFFFF;
  background: #0000A0 url(/menbg.png);
}


.topmenu ul li:hover a {
  background-color:#008000; 
  text-decoration:none; 
  color:#FFFF00;
} 


.topmenu ul li:hover ul {
  display:block;  
  position:absolute; 
  z-index:999; 
  top:29px; 
  margin-top:1px; 
  left:0;
}


.topmenu ul li:hover ul li a {
  display:block; 
  width:12em; 
  height:auto; 
  line-height:1.3em; 
  margin-left:-1px; 
  padding:5px 10px 5px 10px; 
  border-left:solid 1px #363636; 
  border-bottom: solid 1px #363636; 
  background-color:#0000FF;  
  color:#FFFFFF;
} 


.topmenu ul li:hover ul li a:hover {
  background-color:#CA0000; 
  text-decoration:none;
  color:#FFFF00;
} 


.topmenu table {
  position:absolute; 
  top:0; 
  left:0; 
  border-collapse:collapse;
  color: #FFFFFF;
  background: #0000A0 url(/menbg.png);
}


.topmenu ul li a:hover {
  background-color:#008000; 
  text-decoration:none;
  color:#FFFF00;
} 


.topmenu ul li a:hover ul {
  display:block; 
  width:12em; 
  position:absolute; 
  z-index:999; 
  top:29px; left:0; 
}


.topmenu ul li a:hover ul li a {
  display:block; 
  width:12em; 
  height:1px; 
  line-height:1.3em; padding:4px 16px 4px 16px; 
  border-left:solid 1px #363636; 
  border-bottom: solid 1px #363636; background-color:#0000FF;  
  color:#FFFFFF;
} 


.topmenu ul li a:hover ul li a:hover {
  background-color:#CA0000; 
  text-decoration:none;
  color:#FFFF00;
}

The next two things aren't really significant. (See Image)

http://img73.imageshack.us/img73/1725/50804367ww7.png
(Shown in red)

If possible, I would like to remove that space in the center column and expand the width of the blockquote section in my sidebar, but I can't seem to find out how.

Website: http://banjouniverse.110mb.com/css2.php
CSS: http://banjouniverse.110mb.com/master2.css

Small Gap Above Header Image?

Similar Tutorials

View Content

Wondering if anyone can tell me why there is a gap above my header image. Surely I am missing something in Firebug?

h**p://www.topofferspage.com

Small Link Problem

Similar Tutorials

View Content

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]

Apply Small Ie Margin Fix

Similar Tutorials

View Content

Hi! In this page [www].bezlica.ru/chat/sample.php , left bottom flash window is 3 pixels up of its normal position. In Firefox it renders well. Is there any way to fix in IE, while not affecting Firefox?