|
CSS - Screen Display Ie 7
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. Similar TutorialsHi Guys, I'm building some forms, and when they are submitted, I'd like to integrate a method that will fade out the screen a bit, and show an animated "processing" .gif. Basically when the "submit" button is pressed, the form is being submitted to it's destination. The page will hang on the form until the next page is ready to load. While it's hanging there after submitting, I'd like the screen to fade out, and display an image in the center of the screen. I'm hoping this can be achieved with CSS, as I try to use as little Javascript as possible. What's the best way to achieve this? I figure if anything a javascript "onsubmit" function will be a good start. Can the screen be faded with CSS? 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? I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? how can i get a div in the middle of the y-axis of the browser window? 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. <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>
</div>
<div class="clearing"> </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. 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 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 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? Suppose I have the following script that creates a div element and set its width and height to fill the whole screen: Code:
<script type="text/javascript">
var oDiv = document.createElement('div');
oDiv.style.width = window.screen.availWidth + "px";
oDiv.style.height = window.screen.availHeight + "px";
//oDiv.style.width = window.screen.width + "px";
//oDiv.style.height = window.screen.height + "px";
oDiv.style.border = "solid 1px #ccc";
document.body.appendChild(oDiv );
</script>
well, the code above actually does the job, BUT a scrollbar (vertical and horizontal) is also created ... how to get rid of the scrollbars? Hi, I have a site (URL address blocked: See forum rules) which I need the bottom footer bar to always be at the base of the screen (on larger resolutions). So when you start minising the browser window and adjusting it up and down it seems to have this grey space under the footer but the footer is meant to be flush to the bottom. Works on every other page bar the homepage and the problem only happens in IE7. Any ideas? Hi When you resize the window to a smaller window the css formatted page contracts and it looks bad. How can you make it add scrollbars so the content doesn't squish as it stays where it is but scrollbars are added to view the whole page. Can it be done as this has a bad effect on my webpage with a few containers when resized to a smaller size. <style type="text/css"> body{margin:0%;padding:0%;min-width:700px;overflow:auto;} I use %positioning for the containers so I guess that also resizes in smaller window mode. If I was to use pixel length and SR is 800X600 is that the actual size i use or would it be smaller? I created a footer that sits on the bottom of the screen using this code: .footer { padding-top:5px; margin-top:5px; font-size:8pt; color:#FFFFFF; position:absolute; bottom:0px; background-image:url('gfx/bg-bottom.jpg'); height:22px; width:100%; } It looks fine when the window is expanded to the size of the screen, but when you shrink it down (so the scroll bar will appear) and then scroll, the footer bar scrolls with the page.. It's kind hard to explain, just give it a try he http://www.juiceboxseo.com/do-it.php Is there a way to make sure it stays on the bottom? Hi, I am having some trouble with stretching a div to the bottom of my page. My background is blue, but I have a centered "main" div over it that is white and I have a fixed, white bar at the bottom with an "about" link and things of that nature. I havae a "content" div to hold text and actual content inside of the "main" div. When there is enough content, the white areas of the page should form a sort of "top hat" over the blue background. However, some pages do not have enough content to stretch the white foreground all the way to the bottom. Is there anyway to essentially add extra whitespace through CSS? Code:
div#main {
margin-left:auto;
margin-right:auto;
width:40%;
height:auto;
background-color:#fff;
}
div#content {
height:100%;
}
div#disclaimer {
background-color:#fff;
position:fixed;
bottom:0px;
left:0px;
width:100%;
}
Those are the pertaining bits of code. The actual content and text of the site are under "content" and "main" is just used for alignment and is a holder for other divs like the header. Any help would be appreciated, thanks! 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!!! I was wondering if there was anyway to make a div appear at the bottom of the monitor. In other words, on my laptop, I have a site that I need to scroll down for. It goes as far down as a copyright notice. The copyright notice has a black border on top, right, and left, but not the bottom. That's fine because when it gets to that item, it stops scrolling and lines up with the bottom of the monitor. However, at home, I have a 21" monitor, and the bottom element is just floating there because everything easily fits within the screen. I wanted to see if I could get that bottom element to line up at the bottom of the viewable area somehow. Is this possible? Thanks. 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> ? 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 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! 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; } |
|||||||