Learn VBA & Macros in 1 Week!

CSS - Problem On 1280px By 1024px Screen Res

Full Excel VBA Course - Beginner to Expert

Problem On 1280px By 1024px Screen Res	View Content

Hi, i have a site that has this parculiar pixel that just appears when you have a 1280px by 1024px screen res and only if you are viewing it in IE, it is fine in mozilla and the rest.

PLEASE Help anyone. I don't know what it could be.

please look at http://russellcorp.loadedtech.com.au

the skin file can be found at http://russellcorp.loadedtech.com.a...ns/RCA/skin.css

THANKS

Full Excel VBA Course - Beginner to Expert

Screen Resolution Problem

Similar Tutorials

View Content

I am having a very strange problem with firefox and different screen resolutions. I have just made a navigation system for a website and tested the links in I.E and F.F - no problems in my screen resolution of 1280 x 1024. I tested it at 800 x 600 and 1024 x 768 and firefox does not change to the hover status when hovering over the link. There are no problems in I.E at the smaller resolutions.

Does anyone have any ideas what is causing this problem.

After playing around with a few things i discovered that if i change my display from inline to block it works perfectly in firefox at all resolutions - In I.E it causes a step like appearance to the links.

Below is the css I am using, I have also added the xhtml at the bottom.

Code:


#top_button li {
	margin: 0;
	display: inline;
	list-style-type: none;		
}
#top_button a:link, #top_button a:visited {
	float: left;
	overflow: hidden;
	height: 0px;
}
#top_nav {
    margin: 0;    
	padding: 0;
}
#top_button {
	position: relative;
	top: 0px;
	left: 157px;
	height: 19px;
	list-style: none;
	margin: 0;
}
#t1 a:link, #t1 a:visited  {
	background-image: url(../images/top_nav_home_1.gif);
	background-repeat: no-repeat;
	padding-top: 19px;
	width: 47px;
}
#t1 a:hover, #t1 a.current { 
	background-position: 0px -19px; 
}
#t2 a:link, #t2 a:visited  { 
    background-image: url(../images/top_nav_services_1.gif); 
	background-repeat: no-repeat;
	padding-top: 19px;
	width: 63px
}
#t2 a:hover, #t2 a.current { 
	background-position: 0px -19px; 
}
#t3 a:link, #t3 a:visited  { 
    background-image: url(../images/top_nav_portfolio_1.gif); 
	background-repeat: no-repeat;	
	padding-top: 19px;
	width: 65px;
}
#t3 a:hover, #t3 a.current { 
	background-position: 0px -19px; 
}
#t4 a:link, #t4 a:visited { 
    background-image: url(../images/top_nav_resources_1.gif); 
	background-repeat: no-repeat;	
	padding-top: 19px;
	width: 72px;
}
#t4 a:hover, #t4 a.current { 
	background-position: 0px -19px; 
}
#t5 a:link, #t5 a:visited { 
    background-image: url(../images/top_nav_contact_1.gif); 
	background-repeat: no-repeat;	
	padding-top: 19px;
	width: 59px;
}
#t5 a:hover, #t5 a.current { 
	background-position: 0px -19px; 
}

{

xhtml

Code:


    <div id="top_nav">
	    <ul id="top_button">
			    <li id="t1"><a class="current" href="/" title="home"></a></li>
				<li id="t2"><a href="/services" title="services"></a></li>
				<li id="t3"><a href="/portfolio" title="portfolio"></a></li>
				<li id="t4"><a href="/resources" title="resources"></a></li>
				<li id="t5"><a href="/contact" title="contact"></a></li>
			</ul>
	</div>

I would appreciate any suggestions!

Div And Screen Resolution Problem

Similar Tutorials

View Content

Hi All,
I have a fixed div which I am using as a footer in my application. here is the screen shot of my page please have a look first so u will understand what i am talking about.

http://img192.yfrog.com/img192/5572/1280x768.gif

Problem is that if I browse the application on 1024 x 768 pixels it works great but when i change the resolution up to 1280 x 800 pixels the image inside the div change its position. I want this to appear same on every resolution...any suggestions or workaround.

the CSS code is below

Code:

#footer
{
     position: fixed;  
    top: auto;
    left: auto;
    width: auto;
}

here is the HTML

Code:

<html>
<head id="Head1" runat="server">
    <link href="../App_Themes/style.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"> </script>
    <title></title>
    
      <style type="text/css">
        .style1
        {
            width: 800px; background-color:White
           
        }
        .style2
        {
            height: 391px;
        }
        .style3
        {
            text-align: right;
        }
 
    </style>
</head>
<body bgcolor="#d7d7d7">
 <form runat="server">
    <div id="content" style="margin: auto; border: thin solid #C0C0C0; padding: 0px 0px 0px 0px; width: 820px; height: 595px" 
        align="center">
        <table align="center" class="style1">
            <tr>
                <td style="font-family: 'Times New Roman', Times, serif; font-size: small; color: #FF0000;" 
                    class="style3">                              
                     <asp:ContentPlaceHolder ID="StatusBar" runat="server">                   
                     </asp:ContentPlaceHolder>
                     <asp:Image ID="Image1" runat="server" ImageUrl="~/images/appHeader.png" /> 
                </td>
             </tr>       
            <tr>
                <td class="style2" align="left" valign="top">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">                 
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
            <tr>
                <%--<td style="background-color: #FF9933; height: 15px;">
                &nbsp;</td>--%>
            </tr>
        </table>   
        <div id="footer">          
         </div>
<%--    <table align="center" class="style1">    
    <tr>
       <td>
         <div id="footer">
          <img src="../images/footer.png" alt=""/>
         </div>
    </td>
    </tr>
   </table>
--%>   </div>
</form>
</body>
</html>

I want a table below the container div and want to place my footer div inside that table and on every resolution it should come up the same...i did try but its not working...help need

Screen Resolution Problem (hi-res Ok, Lower Res All Messed Up!)

Similar Tutorials

View Content

Hi everyone,

In high resolution settings (like 1600x900) this layout looks great. But, on 1280 x 720 the layout gets all screwed up.

Can someone look at the CSS below and let me know where I'm screwing up? Thanks!

The site is romanceplaybook dot com and here is the CSS:

body {
background: #ffffff url(images/bkgd.jpg) top repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px auto 0px;
padding: 0px;
}

#wrap {
background: #ffffff url(images/bg.jpg) top center repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px 300px 0px;
padding: 0px;
}

/************************************************
* Hyperlinks *
************************************************/

a, a:visited{
color: #507AA5;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************************************************
* Header *
************************************************/

#header {
background: #FFFFFF;
width: 1000px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
text-align: center;
text-transform: uppercase;
}

#header a {
font-family: Times New Roman, Helvetica, Sans-Serif;
font-size: 48px;
color: #333333;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

#header a:hover{
color: #333333;
}

/************************************************
* Navbar *
************************************************/

/************************************************
* Left Sidebar *
************************************************/

#l_sidebar {
float: left;
width: 160px;
margin: 0px 20px 0px 0px;
padding: 20px 0px 20px 0px;
}

#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#l_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}

#l_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#l_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#l_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Right Sidebar *
************************************************/

#r_sidebar {
float: right;
width: 160px;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
}

#r_sidebar p{
padding: 2px 0px 16px 0px;
margin: 0px;
line-height: 20px;
}

#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#r_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#r_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#r_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Content *
************************************************/

#content {
width: 950px;
margin: 0px auto 0px;
padding: 0px;
}

#content p{
padding: 0px 0px 15px 0px;
margin: 0px;
line-height: 20px;
}

#content p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

#content h1 {
color: #333333;
font-size: 22px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: normal;
padding: 0px 0px 0px 0px;
margin: 0px;
}

#content h1 a {
color: #333333;
text-decoration: none;
}

#content h1 a:hover {
color: #658DB5;
text-decoration: none;
}

#content h2 {
color: #333333;
font-size: 14px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: bold;
padding: 5px 0px 5px 0px;
margin: 0px;
border-top: 1px dotted #C0C0C0;
border-bottom: 1px dotted #C0C0C0;
}

#content p ol{
margin: 0px;
padding: 0px 0px 0px 20px;
}

#content p ul{
margin: 0px;
padding: 0px 0px 0px 20px;
}

blockquote{
margin: 0px 0px 0px 25px;
padding: 0px 25px 0px 10px;
font-style: italic;
color: #666666;
border-left: 3px solid #B3C8DB;
}

#content blockquote p{
margin: 0px 0px 20px 0px;
padding: 0px;
}

#contentmiddle {
float: left;
width: 550px;
margin: 0px 0px 0px 0px;
padding: 20px 5px 10px 20px;
text-align: left;
}

#contentmiddle p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

.contentdate {
background: #FFFFFF url(images/date.gif);
float: left;
width: 45px;
height: 50px;
margin: 0px;
padding: 0px;
}

.contentdate h3 {
color: #FFFFFF;
font-size: 10px;
font-weight: normal;
padding: 1px 0px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

.contentdate h4 {
font-family: Times New Roman, Helvetica, Sans-Serif;
color: #999999;
font-size: 21px;
font-weight: bold;
padding: 5px 4px 0px 0px;
margin: 0px;
text-align: center;
}

.contenttitle {
float: left;
width: 480px;
margin: 0px;
padding: 0px 0px 0px 10px;
}

#contentmiddle ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#contentmiddle ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#contentmiddle ul li a {
color: #507AA5;
text-decoration: none;
}

#contentmiddle ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

#content img.wp-smiley {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

#content img.wp-wink {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

.postspace {
background: #EFEFEF url(images/spacer.gif);
width: 440px;
height: 32px;
margin: 0px;
padding: 0px;
}

/************************************************
* Footer *
************************************************/

#footer {
background: #FFFFFF;
width: 952px;
margin: 0px auto 0px;
padding: 10px 0px 10px 0px;
text-align: center;
border-top: 1px solid #C0C0C0;
}

/************************************************
* Search Form *
************************************************/

#searchdiv {
margin: 0px;
padding 0px;
}

#searchform {
margin: 0px;
padding: 0px;
overflow: hidden;
}

#s {
width: 190px;
background: #EFEFEF url(images/search.gif);
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
padding: 3px;
margin: 8px 0px 0px 0px;
border: 1px solid #C0C0C0;
}

/************************************************
* Comments *
************************************************/

#commentblock {
width: 395px;
background: #EFEFEF;
color: #333333;
float: left;
padding: 10px 20px 0px 20px;
margin: 10px 0px 10px 0px;
border: 1px solid #C0C0C0;
}

ol#commentlist {
padding: 5px 0px 5px 0px;
margin: 0px;
list-style-type: none;
}

.commentdate {
font-size: 12px;
padding-left: 0px;
}

#commentlist li p{
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

.commenttext-admin {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

#commentsformheader{
padding-left: 0px;
}

#commentsform{
text-align: left;
margin: 0px;
padding: 0px;
}

#commentsform form{
text-align: left;
margin: 0px;
}

#commentsform p{
margin: 0px;
}

#commentsform form textarea{
width: 99%;
}

p.comments_link img{
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

Absolute Positioning Problem On Different Screen Resolutions (was Im A Thicky)

Similar Tutorials

View Content

Hi
I have an image positioned on my page with this

Code:

.notpos {
	overflow: visible;
	position: absolute;
	visibility: visible;
	z-index: auto;
	height: auto;
	width: auto;
	left: 170px;
	top: 20px;

}

The problem is when a different screen resolution is used the image moves .......... can anyone help please?

Problem With Data Table Widths That Expand Beyond The Screen View : Using Css Layout

Similar Tutorials

View Content

Hello,

I'm having an interesting dilemma. Hopefully I can get some advice. I have created a site using a 2 column liquid layout. The site is created using CSS. I have tested successfully in both FF & IE (which my client uses). In the content area, there is a data table that is generated dynamically. At times the table consists of many columns. If the table strecthes beyond the screen view (resulting in horizontal scrolling) the container/layout does not stretch with the table.

Any thoughts?

Any suggestions will be greatly appreciated!

Below are snippets of code from the css code and html code:
CSS
Code:

body {
	margin: 0px 20px 0px 20px;
	background-color: #069;
	background-image: url(../images/bkgd.gif);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	color: #036;
	}
	
#container {
	width: 100%;
	margin: 0px auto 0px auto;
	background-color: #DDD;
	}

...

#content {
	background-color: #FFF;
	padding: 20px;
	margin-left: 190px;
	}

...


	
#content_main table.data {
	margin: 0px 0px 0px 0px;
	border: 1px solid #369;
	background-color: #FFF;
	}
	
#content_main table a.nobrdr {
	border-bottom: none;
	}
	
#content_main table.data th {
	height: 20px;
	color: #E8E8E8;
	text-align: center;
	background-color: #369;
	border: 1px solid #2C537D;
	text-transform: uppercase;
	}
	
#content_main table.data td {
	height: 25px;
	padding: 3px;
	border: 1px solid #CCC;
	vertical-align: top;
	line-height: 15px;
	}

HTML
Code:

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="data" summary="this table displays BDXT selected data">
				<tr>
					<th scope="col" width="5%" nowrap>fund</th>
					<th scope="col" width="6%" nowrap>bsli</th>
					<th scope="col" width="4%" nowrap>reg</th>
					<th scope="col">title</th>
					<th scope="col" width="9%" nowrap>projcode</th>
					<th scope="col" width="7%" nowrap>cip</th>
					<th scope="col" width="4%" nowrap>afc</th>
					<th scope="col" width="10%" nowrap>avail</th>
					<th width="10%" nowrap scope="col">oblig</th>
					<th width="10%" nowrap scope="col">oblig</th>
					<th width="10%" nowrap scope="col">oblig</th>
					<th width="10%" nowrap scope="col">oblig</th>
					<th scope="col" width="10%" nowrap>unoblig</th>
					<th scope="col" width="5%" nowrap>&nbsp;</th>
				</tr>
				<tr>
					<td scope="row" align="center" nowrap>682A</td>
					<td align="center" nowrap>1A01A1</td>
					<td align="center" nowrap>HQ</td>
					<td>NEXT GENERATION WEATHER RADAR (NEXRAD) </td>
					<td align="center" nowrap><a href="#">25570427</a></td>
					<td align="center" nowrap>W020200</td>
					<td align="center" nowrap>140</td>
					<td align="right" nowrap>000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000</td>
					<td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td>
				</tr>
				<tr>
					<td scope="row" align="center" nowrap>682A</td>
					<td align="center" nowrap>1A01A1</td>
					<td align="center" nowrap>HQ</td>
					<td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td>
					<td align="center" nowrap><a href="#">25570427</a></td>
					<td align="center" nowrap>W020200</td>
					<td align="center" nowrap>3J0</td>
					<td align="right" nowrap>000,000</td>
					<td align="right" nowrap>000,000</td>
					<td align="right" nowrap>000,000</td>
					<td align="right" nowrap>000,000</td>
					<td align="right" nowrap>000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td>
				</tr>
				<tr>
					<td scope="row" align="center" nowrap>682A</td>
					<td align="center" nowrap>1A01A1</td>
					<td align="center" nowrap>TC</td>
					<td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td>
					<td align="center" nowrap><a href="#">25570427</a></td>
					<td align="center" nowrap>W020200</td>
					<td align="center" nowrap>4C0</td>
					<td align="right" nowrap>000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000</td>
					<td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td>
				</tr>
			</table>

Square Screen Vs Wide Screen

Similar Tutorials

View Content

Hi,

I am a wannabe css compiler...

Have the following problem.

wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen.

I cannot figure out how to compensate the (top/left) position to cover both type screens...

Anyone help me?

Div In Center Of Screen

Similar Tutorials

View Content

Hi All,

This is my first post in CSS forums.
I want to display a DIV in the center of screen. I am using this DIV for the showing the progress image in my search page (So it is is visible only in some cases.) How can I make it visible in the center of the visible screen (above all other elements).

Note: User may have scrolled down the screen. I hope this is possible with CSS

Getting A Blank Screen.....

Similar Tutorials

View Content

I couldn't figure out why people were telling me they couldn't see my page but i could see it just fine in two different locations. Come to find out I use firefox and IE is showing a blank page. Can someone help me with this?

Almost Full Screen Div In Ie

Similar Tutorials

View Content

I've run into yet another IE "feature" that i'd like to ask you, dear colleagues, how to solve.

I have a relatively positioned div and i need to absolute position another div inside of it to fill almost all width and height of the parent. I need it to have a 20px margin from top and bottom. Here's what works in real browsers:

Code:

.somediv{
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
right: 0;
}

Now how do i make it work in a developer's nightmare IE?

There are 2 more divs in top and bottom both 20px high so the new div shouldn't overlap with them.

Screen Display Ie 7

Similar Tutorials

View Content

In IE 7.0 Why is the text displaying the way it is in this screen shot:

http://www.larreamma.com/screens/lmma.png

It should display like this:

http://www.larreamma.com/screens/lmma_ie8.png

(I do not have access to IE 7 to readly test various options).

Thank you in advance.

Screen Detection

Similar Tutorials

View Content

I have a page dien all in css that is all set for 800x600 resolution. Does any one know how I can detect larger screen size/resolutions and center the entire page for these instances

thanks

JT

Div In Middle Of Screen

Similar Tutorials

View Content

how can i get a div in the middle of the y-axis of the browser window?

Extends Off The Screen

Similar Tutorials

View Content

<html>
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>All Fore U Golf Clinic</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "nav.css";
</style>
<style type="text/css" media="screen">
</style>
</head>

<body>
<div id="header">header thing</div>

<div id="wrapper">
	<div id="container">

		<div id="content">
			<h1>content</h1>
			<p>Sum Stuff goes here...</p>
			<p class="last">...and here</p>
		</div>
	</div>
	
	<div id="sidebar">

		<h1>navigation</h1>
<ul id="nav"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About</a> 
    <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Golf Stuff</a> 
    <ul> 
      <li><a href="#">Clubs stuff</a></li> 
      <li><a href="http://www.google.com">accessories stufff</a></li> 
      <li><a href="#">Hosting</a></li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Contact Us</a> 
    <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
      <li><a href="#">Australia</a></li> 
    </ul> 
  </li> 
</ul>
<br>&nbsp;
	</div>
	<div class="clearing">&nbsp;</div>

</div>

<div id="footer">footer thing</div>

</body>
</html>

CSS:
Code:

body {
	font: normal 11px verdana;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */

/*<![CDATA[*/
#wrapper {
	background: #f1f2ea;
}
#header {
	background: #d7dabd;
}
#container {
	width: 100%;
	background: #f1f2ea;
	float: right;
	margin-right: -200px;
}
#content {
	background: #f1f2ea;
	margin-right: 200px;
}
#sidebar {
	width: 200px;
	float: left;
}
#footer {
	background: #d7dabd;
}
h1 {
	margin-top: 0;
}
.last {
	margin-bottom: 0;
}
.clearing {
	height: 0;
	clear: both;
}
/*]]>*/

Works fine in IE, but when displayed in firefox the id=content extends off the screen.

1px Bump When Screen Resized

Similar Tutorials

View Content

I have finally got my page set up as required. There is one minor niggle.

The footer sits at the bottom of the page when the browser is maximised and has no content. If the browser is not maximised or the content introduces scroll bars the footer is bumped up one pixel in IE. How can I get around this? The footer CSS is below, if you require any more CSS let me know which elements (roughly) as there is a lot of it.

PHP Code:
#wrap {
     margin-left: auto; /*center the wrapper CSS2 compliant (all except IE*/
     margin-right: auto;
     margin-top: -21px;
     width: 760px;
     top: 21px;
     min-height: 100%;
     position: relative;
     left: 0px;
     background-image: url(../images/content_bg.gif);
     text-align: left;

}

* html #wrap {
     height:100%;
     padding-bottom: -20px;
}

#clear_footer {
     clear: both;
     height: 21px;
     overflow: visible;
     z-index: 1999;
     /*background-color: green; Used for demonstration purposes only, remove after testing*/
}

#contain_footer {
     left: 0;
     margin-top: -21px;
     width: 100%;
     height: 21px;
     background-color: red;
     background-image: url(../images/contain_footer_bg.gif);
     padding-bottom: 0px;
     z-index: 2002;
}

#footer {
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    width: 760px;
    height: 21px;
    line-height: 21px;
    vertical-align: center;
    background-image: url(../images/footer_bg.gif);
    z-index: 1999;
}

Center Aligning On Screen In Css-p

Similar Tutorials

View Content

If I have a bunch of <div>'s floated here and there to form the layout of my page, if I want to have my design centered on the screen do I have to wrap the whole thing in a another pair of div's, ie <div align="center">...</div> ?

Screen Res Between Diff Comps

Similar Tutorials

View Content

Ok so I got a big one here... At least it is to me. I know absolutely NOTHING about CSS.

I use GoDaddy.com and their program WebSite Tonight to build my website.

http://www.thebdsmith.com

My problem is this.

I build the site using a Macbook Pro 15 inch. I always felt I was rather limited with space.

I was on my brother in laws computer, he has a PC with a widescreen monitor. When viewing the site on HIS computer there was so much empty space on the right hand side. So I got excited and redesigned the site (after redesigning just 2 a week earlier). The outcome was so much better than before.

NOW, this is the problem. When I go back to my Macbook area is missing again and I have to scroll right to see it. I do NOT like that.

I emailed GoDaddy support one guy gave me the dumbest reply I've ever heard that was the OPPOSITE of what I had stated. Another said my template design is a fixed width and I'd have to edit the CSS coding to fix it.

I don't know where in the CSS code to edit.

This is GoDaddy default CSS that I am just wanting to edit and reuse. I know nothing of CSS so I don't see why not.
Code:

/**
 * @file
 * @project 675
 * @package sftheme
 * @site app1
 */


/** 
 * ------------------------------------------------------------------
 * @section RESETS
 * ------------------------------------------------------------------
 */

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
	font-family: Verdana, Geneva, Kalimati, sans-serif;
    font-size: 11px;
	color: #ffffff;     
	background-color: #051417;
	
	background-image: url(images/675_background.jpg);
	background-position: center top;
    background-repeat: no-repeat;
	

}

   a:link{color: #ffffff;}
   a:visited{color: #ffffff;}
   a:hover {color: #ffffff;}
   
   .sf_navigation ul li a {color: #ffffff;}
 
   .sf_navigation ul li a:visited {color: #ffffff;}
  
   .sf_navigation ul li a:hover {color: #ffffff;}

   .sf_navigation .subnav li a {color: #ffffff;}
   
   .sf_navigation .subnav li a:visited {color: #ffffff;}

   .sf_navigation .subnav li a:hover {color: #ffffff;}
 
   .sf_footer {color: #ffffff;}

   .sf_pagetitle {color: #ffffff;} /*(WST Only)*/
  

.sf_outer_wrapper {

}

.sf_main_header {
   color: #ffffff;
   font-size: 32px;
   font-family: Verdana, Geneva, Kalimati, sans-serif;
   padding-left: 29px;
}

.sf_pagetitle {
  font-family: Verdana, Geneva, Kalimati, sans-serif;
    font-size: 24px;
    font-weight: normal;
    margin: 0;
    padding-top: 0px;
}

.sf_pagetitle h1{
  font-family: Verdana, Geneva, Kalimati, sans-serif;
    font-size: 24px;
    font-weight: normal;
    margin: 0;
    padding-top: 0px;
}

/** 
 * ------------------------------------------------------------------
 * @section HEADER
 * ------------------------------------------------------------------
 */

.sf_outer_wrapper {
    border-left:1px solid #2D4461;
    border-right:1px solid #2D4461;    
}
* html .sf_outer_wrapper {
    width: 1200px;
}

.sf_main_wrapper{
    width: 600px;
	float: left;
	margin-left: 67px;

}
* html .sf_main_wrapper{
	margin-left: 0px;

}
.sf_wrapper {
    margin:0 0;
    padding:0px 10px;  
	width: 1000px;  
}

* html .sf_wrapper {
	width: 1200px; 
}

.sf_wrapper:after {
	clear:both;
	content:".";
	display:block;
	font-size:1px;
	height:0pt;
	visibility:hidden;
}
.sf_region3 {
    height: 150px;
}

.sf_main_header {
    padding-top: 33px;
    margin: 0px 33px;
    color: #FFFFFF;    
}

/** 
 * ------------------------------------------------------------------
 * @section NAVIGATION
 * ------------------------------------------------------------------
 */

.sf_region4 {
	float: left;
	font-size: 14px;
    width: 200px;
    overflow: visible;
    float: left;
    padding-bottom: 50px;
	padding-right: 50px;
    text-decoration: none;
	margin-top: 53px;
    margin-left: -24px;
    .margin-left:-14px;
}

.sf_navigation .nav a {
	width: 139px;
	padding: 10px;
	font-size: 18px;
}

.sf_navigation .sf_first_nav_item  {
	background-repeat: no-repeat;
	background-position: 0px 0;
	padding-top: 12px;
	border: 0;
}

.sf_navigation {
	 float: left;
    padding-bottom: 50px;
	padding-right: 50px;
    text-decoration: none;
	margin-top: 0px;
    width: 159px;
	margin-left: 77px;
	z-index: 1000;
	position: relative;
}
* html .sf_navigation {
	margin-left: 33px;
}

.sf_navigation .nav .subnav a {
    background-image: none;
	font-size: 12px;
	padding-bottom: 12px;
	padding-top: 12px;
	background-color: #051417;
	background-repeat: no-repeat;
	background-position: top right;
	border: none;
	z-index: 1000;
}
.sf_navigation .nav .subnav a{
    background-color: #051417;
	color: #ffffff;
}
.sf_navigation .nav .subnav a:link{
    background-color: #051417;
	color: #ffffff;
}

.sf_navigation .nav .subnav a:visited{
    background-color: #051417;
	color: #ffffff;
}
.sf_navigation .nav .subnav a:hover {
    background-color: #051417;
	color: #ffffff;
}

.sf_navigation ul {
	padding: 0 0 12px 0;
	margin: 0;
	list-style: none;
	float: left;	
	background-position:0 bottom;
	background-repeat:no-repeat;
}

.sf_navigation:after {
    content: ".";
    display: block;
    visibility: hidden;
    height: 0;
    font-size: 1px;
    clear: both;
}

.widget {
    margin-left: 24px;
}
* html .widget {
    margin-left: 24px;
}

.sf_region4 .sf_navigation .nav a:hover {
    text-decoration: none;
}

.sf_navigation ul li {
	float: left;	
}

.sf_navigation ul li a {
	width: 214px;
	display: block;
	text-decoration: none;
	padding: 0;
    padding-bottom: 12px;
	width: 200px
}

.sf_navigation li ul.subnav {
	padding: 0;
	margin: 0;
	list-style: none;
	float: left;
	width: 160px;
	position: absolute;
	left: -999em;
	margin-left: 158px;
	margin-top: -43px;
	z-index: 1000;
    padding:5px 5px 0;
	background-image: none !important;
	background-color:#051417;
}

.sf_navigation .subnav li {
	float: left;
	margin-bottom: -1px;
	width: 176px;
}

.sf_navigation .subnav li a {
	width: 11em;
	display: block;
	color: #000000;
	text-decoration: none;
	padding: 0;
    margin-bottom: 0px;
}

.sf_navigation .subnav li a:visited {
	color: #000000;
}

.sf_navigation .subnav li a:hover {
	color: #000000;
    text-decoration: none;
}

#Nav1 li:hover, 
#Nav1 li.hover {  
    position: relative;  
}
/* lists nested under hovered list items */
#Nav1 li:hover ul, 
#Nav1 li.sfhover ul { 
	left: auto;
}

#Nav1 iframe{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
    display: none;
}

* html #Nav1 iframe {
    display: inline;
	filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}

.sf_navigation .widget_header{
    display: none;
}

.sf_navigation ul.subnav a {
    color: #FFFFFF;
}

.sf_navigation ul.subnav a:hover {
    color: #a4bedf;
}

.sf_navigation ul.subnav a:visited {
    color: #FFFFFF;
}

/** 
 * ------------------------------------------------------------------
 * @section MAINCONTENT
 * ------------------------------------------------------------------
 */

.sf_pagetitle {
	margin-left: 316px;
	width: 600px;
	margin-bottom: 20px;
	padding-bottom: 10px;

}

* html .sf_pagetitle {
    margin-left: 5px;
}


.sf_pagetitle h1 {
    padding-right: 22px;
}

.sf_main_wrapper {
    margin-top:-25px;
    padding-bottom: 50px;
}

.sf_content {
    padding-left:27px;
    padding-top:21px;
	float: left;
	width: 600px;
}

* html .sf_content {
	padding-left:0px;
    width: 700px;
}


/** 
 * ------------------------------------------------------------------
 * @section FOOTER
 * ------------------------------------------------------------------
 */

.sf_footer{
    width: 425px;
    margin: 0px auto;
    padding-top: 60px;
    padding-bottom: 20px;
}

a:hover {
   text-decoration: none;
} 
* html a {position:realtive}

Sorry for the huge post and thanks for taking the time to read and any help you may offer!

B.D.Smith

Center Div Middle Of The Screen?

Similar Tutorials

View Content

I have been looking for this all over the place but cant find the right solution.

I want a div aligned like it's on this website.

Code:

http://www.captaincrawl.com/

1. It's aligned in the center/middle of the screen
2. It's relative so it moves according to the window size
3. It should work on major browsers such as IE

Can anyone help me please?

Anyone Have A Screen Res Wider Than 1600px?

Similar Tutorials

View Content

I could use some help testing out a css box that's been breaking on large screen res's.

Its a sliding door effect as the page gets wider made with 800px wide images.

I added max-width: 1600px to my container I'm hoping that fixed it.

Quote:
#container{ width: 100%; margin-left: auto; margin-right: auto; margin-top: 100px; max-width: 1600px; }

Positioning: Div Box Moves Off Screen

Similar Tutorials

View Content

How To Deal With Screen Resolution

Similar Tutorials

View Content

I am in the process of designing a website and I have dual monitors at home, one is using 1024x768, and other is using 1280x1024 resolution. The website I have designed, off course looks different from one resolution to the other. One the less resolution monitor, the site looks big (my masthead is 750x200 and the whole page is approximately 770x900), however, on the high resolution, the site looks tiny. on 1200 wide resolution my page width is only 770, so there is white (in my case blue) space both sides making it look not so good.

Because of the above reason, the site looks big on one monitor and very tiny on the other. I am sure there would be lots of people out there with those two kinds of resolutions (I am mostly concerned about these two resolutions). I wonder how do people deal with this when they are designing a website? Could one find out the resolution of the monitor ahead of time (before displaying the page) and have different css/images be loaded based on the monitor it is being viewed? Is there a concept of floating site -- what I mean by that is if there is a concept of site automatically changing appearance based on screen resolution?

Thanks!!!