CSS - Css Text Alignment Issue

Good day!

when i run my webpages in IE8 the alignment was change i don't know why it happens. Before my webpage is fix on my screen but now the scrollbar was visible, which is i don't want to happen...is it css code help me in my problem?

Hello everyone.

Another episode of stupid CSS tricks here!

h-t-t-p://rewards.yarnell.openi.com/

This site looks good in IE8, Firefox, Safari, Chrome. Only older IE shows the rightmost DIV, the main content area, as underneath the rest of the page. This is not my first CSS only site, but for some reason, I can't figure out why it isnt displaying correctly in older IE. If you are using IE8 and need to see it broken, just throw the site into compatibility mode.

I have all the DIV styles in the source, not in a stylesheet to make it easy for anyone to help me with this.

I just know this is going to be something simple, and thank you in advance to anyone kind enough to give this a look!

Have a great day!

Hi guys,
I've been desperately trying to get this to work but realised I have to ask for help.

www johnbradbury com

This looks right in Internet Explorer 7, the header bar is at the top and stretched across the whole screen. In earlier versions this is pushed down etc....

Anyone point me in the right direction?

Hello all!

I am trying to create a simple website. I had it working in html alignment wise here
URL

But i want it working in CSS. Look here URL
and tell me what it is i have done wrong. I want the two colums to sit next to each other, centered.

Thanks for your time.

I have a table inside of a div, and I need to push the table down a little bit but can't get it to without using line breaks, which push it down too far.

I have a background image that I'm using to emulate a shadow and need the table to just be a little bit lower so that the upper right hand corner image blends in with it.

Here is my CSS:

Code:

#header {
  width: 100%;
  height: 90px;
  padding-bottom:5px;
  padding-right: 10px;
  margin-bottom: 5px;
  vertical-align: bottom;
  background: url(img/hd_shw.gif) no-repeat right;
}
.top {
  width: 16px;
  height: 16px;
  vertical-align: top;
}

.bottom {
  height: 16px;
  width: 16px;
  vertical-align: bottom;
}

.blue_fill{
  background-color: #4095BF;
}

My HTML:

Code:

<div id="header">
     <table class="hdr_bk" align="center" width="100%" style="height: 92%;" cellpadding="0" cellspacing="0">
       <tr>
         <td class="top" style="background: url(img/b_tl.jpg) no-repeat top left #4095BF;"></td>
         <td class="blue_fill"></td>
         <td class="top" style="background: url(img/b_tr.gif) no-repeat top right;"></td>
       </tr>
       <tr class="blue_fill">
         <td></td>
         <td>Header</td>
         <td></td>
       </tr>
       <tr>
         <td class="bottom" style="background: url(img/b_bl.jpg) no-repeat bottom left #4095BF;"></td>
         <td class="blue_fill"></td>
         <td class="bottom" style="background: url(img/b_br.jpg) no-repeat bottom right #4095BF;"></td>
       </tr>
     </table>
  </div>

I realize that there is a gap, which will be fixed when I figure out how to push down the table.

Hello everyone! A pre-emptive thank you to anyone and everyone who reads and responds to my questions! I'm new to CSS, being more of a designer and far, far less of a coder, so forgive any potential glaring errors I may be making. I'm having to learn all this stuff as I go along, with little to no guidance, so any advice you guys might have as far as repairing my lackluster coding will be taken with shy graciousness.

I'm attempting to put together a basic template for a website I am trying to build, to use in conjunction with concrete5, an open-source CMS. I've managed to make it look and operate correctly in IE and Chrome, but in FireFox the navbar on the bottom does not align itself correctly. It jumps several hundred pixels down the page and jolts sharply to the left.

I've managed to make use of the @-moz tag to get it to accept FireFox-specific behavior. However, I cannot get it to maintain absolute positioning, despite assigning it that attribute. Rescaling the window or zooming in and out in a browser causes it to slide around willy-nilly, even if I reposition it specifically in the CSS.

As a note, I had a lot of trouble getting other elements to properly center in the process of making the whole template, but I'm not sure what was causing that, either. I've not been able to get things to center themselves properly or respond correctly to instructions; I'm basically running in the dark, here.

The code is below. Please let me know what I'm doing wrong!

Code:

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$this->inc('elements/header.php');
?>

<body>
<div id="container">
    <div id="navbar">
	   	<div class="navspacer">
        	<a href=""></a></div>
        <div class="nav1">
        	<a href="plans.html"></a></div>
        <div class="nav2">
        	<a href="phones.html"></a></div>
        <div class="nav3">
        	<a href="broadband.html"></a></div>
        <div class="nav4">
        	<a href="index.html"></a></div>
		<div class="nav5">
        	<a href="services.html"></a></div>
		<div class="nav6">
        	<a href="accessories.html"></a></div>
   		<div class="nav7">
        	<a href="locations.html"></a></div>
          <div class="display">
          <div class="presentation">
          	<div class="columnzone">
		<div class="column1">
			<div class="columncontent">
				  <?php
         	$a = new Area('Sidebar');
         	$a->display($c);
         	?>
			</div>
            </div>
		<div class="column2">
			<div class="columncontent">
			    <?php
         	$a = new Area('Main');
         	$a->display($c);
         	?>
			</div>
		</div>
		<div class="column3">
			<div class="columncontent">
			    <?php
         	$a = new Area('Column3');
         	$a->display($c);
         	?>
			</div>
		</div>
        </div>
        </div>
	<div id="bottomnav">
        <div class="bnav1">
        	<a href="contactus.html"></a></div>
        <div class="bnav2">
        	<a href="feedback.html"></a></div>
        <div class="bnav3">
        	<a href="employment.html"></a></div>
      	</div>
        </div>
        </div>
</div>
</div>
<div class="footer">
<?php  $this->inc('elements/footer.php'); ?>
</div>
</body>

And the CSS:

Code:

/* CSS Document */

body {
	font:12px Trebuchet MS, Tahoma, Arial;
	color:#000000;
	background:url(/images/bg.jpg) repeat;
				
}

#container {
margin:0 auto;
width:1050px;
bottom:0;
}

/*	NavBar 	*/

#navbar {
	width: 928px;
	height: 90px;
	position:absolute;
	padding-left:50px;
	top:0;
}

#navbar li {
    list-style:none;
    display:inline;
}

.navspacer a {
	display:inline;
	float:left;
	width: 20px;
	height: 90px;
	background:url(/images/nav00.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav1 a {
	display:inline;
	float:left;
	width: 132px;
	height: 90px;
	background:url(/images/nav01.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav1 a:hover { 
	background:url(/images/nav08.png) no-repeat;
}

.nav2 a {
	display:inline;
	float:left;
	width: 127px;
	height: 90px;
	background:url(/images/nav02.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav2 a:hover { 
	background:url(/images/nav09.png) no-repeat;
}

.nav3 a {
	display:inline;
	float:left;
	width: 139px;
	height: 90px;
	background:url(/images/nav03.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav3 a:hover { 
	background:url(/images/nav10.png) no-repeat;
}

.nav4 a {
	display:inline;
	float:left;
	width: 114px;
	height: 90px;
	background:url(/images/nav04.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav4 a:hover { 
	background:url(/images/nav04.png) no-repeat;
}

.nav5 a {
	display:inline;
	float:left;
	width: 126px;
	height: 90px;
	background:url(/images/nav05.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav5 a:hover { 
	background:url(/images/nav12.png) no-repeat;
}

.nav6 a {
	display:inline;
	float:left;
	width: 129px;
	height: 90px;
	background:url(/images/nav06.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav6 a:hover { 
	background:url(/images/nav13.png) no-repeat;
}

.nav7 a {
	display:inline;
	float:left;
	width: 141px;
	height: 90px;
	background:url(/images/nav07.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav7 a:hover { 
	background:url(/images/nav14.png) no-repeat;
}

/*	NavBar End 	*/


/*	Central Display Area 	*/

.display {
	display:block;
	height:475px;
	left: 74Px;
	position: static	;
	width:950px; 
	background:url(/images/display.png) top no-repeat;

}

/*	Central Display Area 	*/


/*	Presentation Area 	*/

.presentation {
	display:block;
	height:466px;
	position: absolute;
	left:71px;
	width:908px;
	top:421px;
	background:url(/images/presentation01.png) top no-repeat;
}


.columnzone {
	margin-top:-35px;
	padding-top:52px;
	position:relative;
	z-index:0;
}

.columncontent {
	padding: 18px 0px 0px 0px;
}

.column1 {
	width:259px;
	float:left;
	padding: 0px 15px 10px 20px;
}

.column2 {
	width:303px;
	float:left;
	padding: 0px 10px 10px 9px;
}

.column3 {
	width:259px;
	float:left;
	padding: 0px 10px 10px 15px;
}

/*	Presentation Area End	*/


/*	Bottom Nav	*/


#bottomnav {
	display:block;
	width: 928px;
	height: 90px;
	position:absolute;
	margin-top:887px;
	margin-left:21px;
}

#bottomnav li {
    list-style:none;
    display:inline;
}

.bnav1 a {
	display:inline;
	float:left;
	width: 326px;
	height: 37px;
	background:url(/images/presentation02.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.bnav1 a:hover { 
	background:url(/images/presentation05.png) no-repeat;
}

.bnav2 a {
	display:inline;
	float:left;
	width: 250px;
	height: 37px;
	background:url(/images/presentation03.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.bnav2 a:hover { 
	background:url(/images/presentation06.png) no-repeat;
}

.bnav3 a {
	display:inline;
	float:left;
	width: 332px;
	height: 37px;
	background:url(/images/presentation04.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.bnav3 a:hover { 
	background:url(/images/presentation07.png) no-repeat;
}


@-moz-document url-prefix() {
  #bottomnav {
   	display: inline-block;
	position:absolute;
	width: 928px;
	height: 90px;
margin-left:0px;
padding:0 0 0 0; 
} 

/*	Bottom Nav End	*/

.footer {
	background:url(/images/footer.png) no-repeat;
	height:60px;
	text-align:center;
	color:#fefaca;
	padding-top:18px;
	margin-top: -500px;
	margin-bottom:20px;
	position:relative;
	z-index:2;
}

Hi,

I've decided to take the plunge and try using CSS to replicate a table layout.

I've appended my code below. My issue is that I cannot get the menu and content <DIV> to align next to each other.

Any tips gratefully received.

PHP Code:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>CSS Layout</title>
    <style type="text/css">
    <!--

    P {
      color: white;
      }
    
    body {
          background-color: #000000;
          text-align:center;          
         }
    
    #box {
         width: 750px;
         margin: 0px auto;
         background color: #ccc;
         text-align: left;
         border:1px solid white;
         }
         
    #banner {
            width: 745px;
            margin: 10px;
            height: 100px;
            border: 1px solid white;
            background-color: #000000;
            }
          
    #menu {
          margin-left: 10px;
          background-color: #000000;
          width: 200px;
          border: 1px solid white;
          }
          
    #content {
             background-color: #000000;
             width: 500px;
             border: 1px solid white;
             }
             
    #footer {
            width: 745px;
            margin: 10px;
            height: 50px;
            border: 1px solid white;
            background-color: #000000;        
            } 
          
    
             
    !-->    
    </style>
</head>


<body>
<div id="box">
      
                 <div id="banner">
             <p>
             this is my banner
            </p>
            </div>
              
            <div id="menu">
            <p>
            this is the menu
            </p>                    
             </div>
                
            <div id="content">
            <p>
            this is my content
            </p>
            </div>
                
            <div id="footer">
            <p>
            this is my footer
            </p>
            </div>
</div>
</body>
</html> 

I've added a background to my site which sits behind the content, in firefox it works fine, it sticks to the bottom of the browser fine, the same applies in IE, but we all know the IE PNG bug, so I used filter instead to load the PNG. But now the image is aligning at the top of the div:

Screenshot
The red shows where the div is actually covering, and it does cover right down to the bottom of the browser.

How do you go about getting the filtered image to go to the bottom of the div?

Theres maybe a simple solution but at the moment its not coming to me.

I'd rather not use another file format, thats the last resort.

Hi,

I am looking to align the links in the top right hand corner of my blog fully to the right but at the moment they are moved to the left slightly

can anyone help with this?

www dot gadgetwire dot co dot uk

Thanks

Nevermind, folks over at codingforums helped me.

Hi,

I am having trouble with divs inside tables cells. I have td's in a row, and I want all the objects within these cells to be aligned at the top of the cells. However, the objects within the cells with lesser content are vertically aligning to the central level of the cell with the most content.

Please check: www dot incorrectlyprogrammed dot org/CRC/ to see what I mean.

This is driving me mad. Any help appreciated!!

Hi guys, im new to the webdevelopment world and humbely request your help (However you may see me in the adobe related areas, i have experience there )

Im currently making a profile for my work.

Here are the problems that i couldnt solve through research on other places.

1. I have this odd looking shadow appearing on the hover boxes i got (Thanks to jquery).

PHP Code:
.menu li {     
padding: 0px;     
margin: 0px 6px; 
float: left;     
position: relative;
text-align: center;
width: inherit;

} 





(apparently its something to do with float requiring a width, but i dont fully understand..)


2. The way i have set out my body is to have greater priority to repeating-y whitebox (Its part of a double background thing i attempted) to center along with the background image set in the element html. Because of this my text is totally off, so i was wondering on how to fix this issue (i was thinking about using div tags, but im not exactly sure how to do it). It is also weird how i need to have a 4px margin to align the boxes (even though they are the same width and are positioned to centered).



Help on this issue would be greatly appreciated ! Many thanks in advance <3!

Notes: I have passed with no warning or issues with the Markup Validation test and CSS test at w3.

I have also looked at other blogs and help threads (Like in the adobe comments), but its hard to find something your unsure what it is!

refrence: renren.tssma .com

I'm having trouble getting two textual elements to align oppositely, one left one right, within a DIV.

Visually, I am attempting this:
PHP Code:
=================================================================
User: John Doe                                Main Menu :: Logout
================================================================= 





To accomplish this in all browsers as compliantly as possible, I attempted to define the outer div in CSS, align the content left in the XHTML, and then float another DIV inside to the right to hold the right-aligned textual content.

I know that since <DIVs> are considered block level items, they are preceeded and followed by a linebreak. Thus, I defined the Right-floated DIV as display: inline, hoping to fix that.

The CSS:
PHP Code:
#loginbar {
 height: 14px;
 font-size: 7pt;
 line-height: 7pt;
 font-weight: bold;
 color: #ffffff;
 background: #285064;
 margin: 0;
 padding: 3px 3px 0px 3px;
}
 
#logout {
 float: right;
 display: inline;
}

.loglink {
 font-size: 7pt;
 line-height: 7pt;
 font-weight: bold;
 color: #ffffff;
} 





And the markup:
Code:

<div id="loginbar" align="left">
User: '.$_SESSION['fullname'].'
<div id="logout" align="right">
<a class="loglink" href="main.php">Main Menu</a> :: <a class="loglink" href="logout.php">Logout</a>
</div></div>

This system works nicely in every browser I've tried (IE6 Win, IE5.1 Mac, Opera 7.54, Camino, Safari, and NN7.2) EXCEPT Firefox. Firefox continues to put the linebreak in before the logout, dropping the text halfway below the bottom of the div even when the div is defined as display:inline. (Interesting enough, the other so-called compliant browsers don'tput in the linebreak before the div even when it's not defined inline.)

Anyone have a more elegant solution to this? I'm pretty sure I'm doing it the hard way now and can't see the forest from the trees at this point

I'm using a background image but am having a hard time indenting the text.
Code:

ul.leftside li {
       font: bold 11px Helvetica,sans-serif;
       color: #FFF;
       background: url(images/left_menu-bg.jpg) no-repeat;
       margin: 7px 10px 5px 4px;
       list-style-type: none;
    }

<ul class="leftside">
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Rooms</li>
<li>Reservations</li>
<li>Siteseeing</li>
<li>Contact Us</li>
 </ul> 

The only way I can move the text over is by adding the non-binding spaces and I can't seem to get a style to work in the line item either.

Thanks in advance!

Ok, I have a menu (that I did not build, that I got from a template) that I cannot seem to figure out how to center the text in, and it's driving me crazy.

I have done the validation, and debugged it as much as I can, but I'm not a css guru, so I was hoping someone here can help me. I feel like I've tried everything.

So you can see the menu at www.eliteoutfittersutah.com/new. The menu at the top I am desperate to center. I have been able to modify everything else through the css, but just can't seem to get the text alignment centered. I have checked the js files as well, but don't think it's in there. I think it just might be missing a tag? Any help would be GREATLY appreciated.

The styles.css is (and of course you can view the page code from the page itself when you look at the menu):

Code:

@charset "utf-8";
/* CSS Document */

/* Easy Slider */

a:link                                      {
	color:#333333;
	text-decoration: none;
	font-weight: bold;
}
a:active                                      {
	color:#333333;
	text-decoration: none;
	font-weight: bold;
}
a:hover                                       {
	color:#052807;
	text-decoration: none;
	font-weight: bold;
}
a:visited                                     {
	color:#333333;
	text-decoration: none;
	font-weight: bold;
}
a:visited:hover                               { 
    color:#052807;
	text-decoration: none;
	font-weight: bold;
}

#slider ul, #slider li,
#slider2 ul, #slider2 li{
	margin:0;
	padding:0;
	list-style:none;
}
#slider2{
	margin-top:1em;
}
#slider li, #slider2 li{
	/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
	width:1018px;
	height:336px;
	overflow:hidden;
}	
		
	/* numeric controls */	

ol#controls{
	margin:3px 0;
	padding:0;
	padding-left:10px;
	height:20px;	
}
ol#controls li{
	margin:0 10px 0 0; 
	padding:0;
	float:left;
	list-style:none;
	height:20px;
	line-height:20px;
}
ol#controls li a{
	float:left;
	height:20px;
	line-height:20px;
	border:1px solid #ccc;
	background:#d3d3d3;
	color:#555;
	padding:0 5px;
	text-decoration:none;
}
ol#controls li.current a{
	background:#052807;
	color:#FFFFFF;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
	
/* // Easy Slider */

.lavaLampWithImage {
	position: relative;
	height: 68px;
	width: 1018px;
	overflow: hidden;
	background-image: url(../images/navbg.png);
	background-repeat: no-repeat;
	background-position: top;
	padding-top: 15px;
	padding-left: 0px;
}
.lavaLampWithImage li {
    float: left;
    list-style: none;
}
.lavaLampWithImage li.back {
    background: url("../images/lava.png") no-repeat right -34px;
    width: 9px; height: 34px;
    z-index: 8;
    position: absolute;
}
.lavaLampWithImage li.back .left {
    background: url("../images/lava.png") no-repeat top left;
    height: 34px;
    margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a {
    font: 17px arial;
	font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
    outline: none;
    text-align: center;
    top: 7px;
    text-transform: uppercase;
    letter-spacing: 0;
    z-index: 10;
    display: block;
    float: inherit;
    height: 34px;
    position: relative;
    overflow: hidden;
    margin: 0 12px;    
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
    border: none;
}
						
body {
	background-image: url(../images/bg.gif);
	background-repeat: repeat-x;
}

body, html {
	height: 100%;
    margin: 0;
}

#st2, #st3 {
	display: none;
}

#wrapper {
	width: 1018px;
	margin: 0 auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #333333;
}
#topbar {
	height: 22px;
	margin-top: 5px;
	padding: 5px;
}
#skin {
	float: right;
	width: 180px;
	text-align: right;
	font-size: 11px;
	text-transform: uppercase;
}
#skin ul {
	margin: 0px;
	padding: 0px;
}
#skin li {
	list-style-type: none;
	display: inline;
	padding-left: 10px;
	padding-right: 10px;
}
#skin a:link {
	text-decoration: none;
	color: #FFFFFF;
}
#skin a:visited{
	text-decoration: none;
	color: #FFFFFF;
}
#nav {
	height: 90px;
}
#header {
	height: 370px;
	font-size: 11px;
}
#content {
	padding: 10px;
	clear: both;
	margin-bottom: 10px;
	overflow: hidden;
}
#footer {
	background-image: url(../images/footer.jpg);
	background-repeat: no-repeat;
	height: 80px;
	width: 1010px;
	text-align: center;
	padding-top: 20px;
	clear: both;
	color: #FFFFFF;
}
#left {
	float: left;
	width: 670px;
}
#right {
	float: right;
	width: 260px;
	padding-left: 30px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCCCCC;
}
.brownheadline {
	font-size: 35px;
	font-weight: bold;
	color: #ab4d1b;
	letter-spacing: -1px;
	line-height: 30px;
}
.greenheadline {
	font-size: 35px;
	font-weight: bold;
	color: #052807;
	letter-spacing: -1px;
	line-height: 30px;
}
.browntitle {
	font-size: 42px;
	font-family:"Times New Roman";
	font-weight: bold;
	color: #ab4d1b;
	letter-spacing: -1px;
	line-height: 30px;
}
.greentitle {
	font-size: 42px;
	font-family:"Times New Roman";
	font-weight: bold;
	color: #052807;
	letter-spacing: -1px;
	line-height: 30px;
}
.leftimg {
	float: left;
	padding-right: 15px;
	display: block;
}
.greentext {
	font-weight: bold;
	color: #052807;
}
.browntext {
	font-weight: bold;
	color: #36a0e7;
}
.style1 {
	color: #6A2C0D;
}
.greyline {
	background-color: #CCCCCC;
	height: 1px;
	margin: 8px 0 8px 0;
}
#contact {
	color: #696969;
	padding: 5px;
}
#contact input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding: 6px;
	border: 1px solid #696969;
	width: 250px;
	margin: 5px 0 5px 0;
}
#contact label {
	float: left;
	width: 80px;
	display: block;
	padding: 3px;
	margin: 3px 0 3px 0;
	clear: both;
}
#contact textarea {
	border: 1px solid #696969;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding: 6px;
	width: 250px;
	margin: 5px 0 5px;
}