|
CSS - Css Main Content Area Not Showing Up The Same Ie Vs. Firefox
Here's the url
Template Any comments on the code will be very helpfull. Even if it is out of topic. In IE it looks pretty good. In firefox the border goes under the large image and the image navigation is left there naked on the body background. Similar TutorialsOn the home page of my site (http://awsmiedev06.awecomm.com), there is a large clickable area for Life Insurance, Health Insurance & Disability Insurance. However, when you get into the internal pages of the site, the clickable area is much smaller, making it harder to click on the 3 Insurance Navigation items. You have to almost click on top of the words to get the arrow to turn into a hand so you can click on it. Why is this? Why is the clickable area large (and perfect) on the home page but not on the internal pages? This is the code for the navigation items: Code: .cl2a /*disability*/
{
background-image:url('images/awh-hover.png');
background-repeat:no-repeat;
width:349px;
height:42px;
float:right;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#1e5aa2;
padding-top:9px;
display:block;
margin-left:-24px;
}
.cl2d /*disability*/
{
background-image:url('images/cl_2.jpg');
background-repeat:no-repeat;
width:349px;
height:42px;
float:right;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
margin-left:-4px;
}
a.cl2:hover /*disability*/
{
width:346px;
height:42px;
float:right;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color :#163752;
padding-top:9px;
display:block;
margin-left:-2px;
}
.cl3a /*life*/
{
background-image:url('images/aws-hover.png');
background-repeat:no-repeat;
width:295px;
height:42px;
float:left;
margin-left:-13px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#1e5aa2;
padding-top:9px;
display:block;
}
.cl3d /*life*/
{
background-image:url('images/cl_3.jpg');
background-repeat:no-repeat;
width:295px;
height:42px;
float:left;
margin-left:-13px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
a.cl3:hover /*life*/
{
width:295px;
height:42px;
float:left;
margin-left:-13px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
.cl4a /*health*/
{
background:url('images/awd-hover.png') no-repeat top left;
width:328px;
height:42px;
float:left;
margin-left:-5px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#1e5aa2;
padding-top:9px;
display:block;
}
.cl4d /*health*/
{
background-image:url('images/cl_4.jpg');
background-repeat:no-repeat;
width:328px;
height:42px;
float:left;
margin-left:-5px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
a.cl4:hover /*health*/
{
width:328px;
height:42px;
float:left;
margin-left:-5px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
Any help will be greatly appreciated!!! Hi all, Been having a problem that's been driving me crazy lately. On my blog www.mytechnicalinterviewexperience.com, I'm getting a small dot that's appearing right between the top of the main post area and the right sidebar. If you see the text "subscribe" at the very top of the right side bar, the dot is up and to the left with respect to that. Anyways, the dot is probably hardly noticeable to visitors, but me being extremely anal, I'd like to try and get rid of it. I notice that it has something to do with my amazon associates recommendation widget which is further down the right side appear. It only appears after the recommendations widget finishes loading. Does anyone know how to fix this? Thanks, MyTechIntExp I have tried multiple times to have a kind of "content" div, where it resizes vertically to the amount of content in it, and stays the same width and is centered. How can I do this? I know min-height doesn't work in IE. Another problem I was having, certain pages would be off to the left when they should have been centered. Please help! Quick nagging question that's been bothering me for some time. Fortunately, I have a link to explain the problem. If you go to our web page (link below), you will see that we have a DIV section on the left side of the page which displays a mini You Tube video, along with a few other buttons: http://bit.ly/gL9sA8 The problem is that when you shrink the window, that particular div will shy away outside the bounds of the browser window. Is there anyway to not have it disappear, but at the same time, not have the main content overlap it in anyway. In other words, how would you code the DIV tag so that the following two things happen: 1. It's always in view on the LEFT side of the webpage 2. The main DIV stops against it, and doesn't overlap it if resized As you can see, if you shrink the size of the window, our main div area (div id: mainWrapper) is always going to be centered which is the most important thing. However, we want to have a left (or right) side area to display buttons like that. Here is the current code for that left sided DIV column: Code: <div style="position:fixed; margin-left: -180px; top: 75px;"> // My html content for mini You Tube video & button is here </div> The problem is that if a person has a low resolution monitor, this left hand div is out of view and never seen.....or even worse, it's partially seen and not fully displayed because it's hiding outside the bounds of the window. My goal: To have it fixed to either the outer LEFT or RIGHT side of the webpage, just along the edge of the mainWrapper as you see it now. If I can clear anything up as to what I'm trying to explain, please let me know. I hope one of you awesome gurus can point me in the right direction! Hi All.. I am working on my first real website for a friend and I am having trouble getting the top image where I want it. I will post a link in a sec. What I am trying to do is set a top, middle and bottom image in the Main Content part of the site. It looks like a picture frame but can expand without breaking when I add new content. I had no problem putting the middle image in and I finally got the bottom image set, though I had to do some strange things to get it to work. Now I am stuck on the top image. I can not get it set where I want it. I am still learning CSS/HTML and am trying to do this on my own and with Google . but this has me stumped. Could someone tell me what I should do. Here is the link http://http://www.jamkastin.com/New..._Dreams/dd.html Here is my CSS that I did for the middle and bottom image. Code: <style type="text/css">
#html, body {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width:800px;
height: 100%;
background: url(images/bg.png);
margin: 0 auto;
text-align: center;
font-family: Verdana, Helvetica, sans-serif;
}
#container {
width: 780px;
background: url(images/wood_back.jpg);
margin: 0 auto;
overflow: hidden;
}
#navigation {
margin-top: -4px;
width:780px;
background: #B6C5A4;
font-family:Trebuchet MS, Helvetica, sans-serif;
text-align:center;
overflow:hidden;
}
#navigation ul {
float:left;
list-style:none;
margin: 0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#navigation ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0px;
position:relative;
right:50%;
}
#navigation ul li a {
display:block;
margin:0;
padding:.4em .8em;
color:#000;
text-decoration:none;
}
#navigation ul li a span {
display:block;
}
#navigation ul li.active a {
color: #fff;
font-weight:bold;
}
#navigation ul li a:hover {
color: #fff;
}
#mainContent {
float: left;
width: 450px;
margin: 15px 15px -71px 15px;
padding: 15px 15px 15px 15px;
background:url(mainbg.gif) repeat-y;
}
#mainContent .p3{
padding-bottom:20px;
margin-left: -21px;
background:url(mainbottom.gif) bottom no-repeat;
}
#sidebar1 {
float: right;
width: 200px;
padding: 15px;
margin: 15px;
background:url(sidebg.gif) repeat-y;
}
p {
padding: 0px 20px 0px 20px;
}
#mainContent .article
{
padding-top:20px;
}
.bottom_border {
width: 780px;
height:30px;
margin: 0px 10px;
background-image: url(images/dd_border.png);
}
.copy {
font-size: 12px;
color: #000;
}
.copy a {
color: #000;
}
This is my first completely css site and I am having troubles with my main content areas and some other small minor things. My design requires that the sidebar be the same height as my content area. What do I need to do to get them the same heights. The main content area changes on each page so my sidebar needs to do the same. Here is the website. I guess I cannot post url's so I hope I made sense. Also an example of what the site is going to look is here. Once again cannot post urls. Also, I need help with lists. In the example image I have the lists side-by-side. Normally I would use a table for this. Is there a way to do this with css? Any help would greatly be appreciated. Thanks, Shaun So I'm trying to debug some major issues in IE6. In both my "Home" page and in my "Bio and Press" page my mainbody div and my mainbodyalt div are broken out of the three column laaout and the two column layout and pushed to the bottom of the other div columns. I am stumped as to why this is doing this, may I have some help on the subject please. Here is the link: http://www.lonniebruhn.com/sitelab/index.html Both pages validate Thank you LB So far my site appears somewhat like this Header Menu Main Content Footer Now what I wish to do for the Main Content, is create boxes, 2 top boxes and 2 lower boxes: Box 1 Box 2 Box 3 Box 4 So I've been playing around, trying to get them to float, ya de da, I can manage to get 2 columns, but when I attempt to put in the 2 lower columns, the footer ghosts over top of all the main content and all you can see is the header, menu and footer. If attempted to wrap them in container's but have failed miserably, any help would be appreciated. I've been trying for days to get this to work and nothing i do makes this stupid page extend with the content that i put in. If anyone has any idea's as to why and could point me in the right direction i would very much appreciate it. The link to the site is below, thank you in advance. hxxp://adrian.briansykes.netau.net/ Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Hello - I'm having trouble with the layout of a site I'm working on. Here's the site in question: http://www.americanidiotsband.com/ If you look at it in anything up to 1024x768, it's fine. But if you go higher than that (say, 1280x1024 resolution), then the main (black) part of the page goes only as far down as the content that is filling it. What SHOULD happen is that the black background should span all the way to the bottom, no matter how much content is inside it... Here is a link to the stylesheet that I made up: http://www.americanidiotsband.com/styles.css I'm sure I'm doing something wrong, and I'm hoping that someone could help me correct this. Thanks in advance for any help that can be offered!... Hi, I have a site with a left navigation bar (which is fixed width, and has a background colour that must stretch full screen from top to bottom of the page). The site is: http://67.18.220.222/~duoboots/2005/z.html Stylesheet: http://67.18.220.222/~duoboots/2005...s/style2005.css As you can see, the left navigation menu stops once the content within the div is displayed. It does not stretch to the bottom of the screen. (say if you're on 1024 x 768 resolution) Note: this varies according to the main (right) content. If the main content was shorter than the menu bar - it would work fine. The menu bar has a min-height of 100% which means the background applies to the size of your screen. However, if the main content height is greater than that of the menu bar - then the menu bar will not adapt, but the background simply stops. Is there a workaround for this? With tables, this could easily be achieved because the background colour of one cell is stretch until the end of the table, and not the content within the cell. However, I'd like to do this with CSS. Here's some CSS: Code:
body, p {
color:#666666 ;
font-family: Verdana, Arial ;
font-size:7.5pt ;
font-weight:normal;
}
body {
height:100%;
margin: 0px;
background-color: #2F201E;
}
#container {
width: 968px;
height:100%;
}
#nav {
width: 201px;
border-right: 3px solid #FFFFFF;
background: #8D603B;
float: left;
min-height:100%;
}
I've tried switching "min-height" and "height" but they don't seem to do what I want.... if anyone could help me out it would be MUCH appreciated! Thanks a lot! Hello, I just joined the forum, I'm new to web design although I have some experience in video post production. I'm attempting to create a layout for a website using sticky footer technique and an image for the border shadow in the main column. The sticky footer works well until I tweak the css to add the background border image, then I get this empty space in the middle of the body where the border image background should be extending to. It's probably a novice mistake but I can't get to find it. Your help would be much appreciated. The HTML: Code: <body>
<div id="nonFooter">
<div id="wrapShadow">
<div id="header">
<div id="linksHead"></div>
<div id="mainMenu"></div>
</div>
<div id="content">
<div id="bannerSlider"> (SWF file)
</div>
<div id="contentBuscador">
</div>
<div id="contentTours">
</div>
<div id="contentElite">
</div>
<div id="contentTestimonios">
</div>
<div id="contentPromos">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="wrapShadowFooter">
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
The CSS: Code: html,body {
padding: 0;
margin: 0;
}
html
{
height: 100%;
}
body
{
height: 100%;
background-color: #3399cc;
}
#nonFooter
{
position: relative;
min-height: 100%;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
* html #nonFooter
{
height: 100%;
}
#content
{
padding-bottom: 7em;
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
clear: both;
border-top-width: medium;
border-top-style: solid;
border-top-color: #336;
}
#header {
width: 900px;
height: 100px;
position: relative;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
#footer
{
position: relative;
margin-top: -6em;
height: auto;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#wrapShadow {
width: 920px;
margin: 0px;
padding: 0px;
height: auto;
}
#wrapShadowFooter {
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding: 0px;
background-image: url(_images/footerCruiseship.jpg);
background-repeat: no-repeat;
float: left;
height: 100px;
}
All #content(area) Divs in content have the same code as this:
#contentBuscador {
float: left;
height: 100px;
width: 880px;
padding: 0px;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
Thank you, pixelMason. Edit: Problem Solved thanks to f_nietzsche I was wondering whether there is someway to fix the area of a content in CSS so that it wont expand if too much text was entered, just similar to the html code that fixes the area of the table. i.e. Code: <table style="table-layout: fixed;"> This code lets the table stay in a fixed size no matter how much text is entered... is there a way to have a different background image in the .content area on different pages? this is the site: http://bradleyrose.net/WaterStreetRestaurant/pages/catering&parties.html cobble-stone-road-4.jpg is used on all pages, is there a way to use a different image on some pages? In firefox with a maximised window my main background gets shunted right by 2px. If I de-maximise the window it puts the image centre. It always works in IE. Any ideas? hello all, i recently tried to implement a layout which fills the available screenspace, with the main content area as scrolling box. I thought i succeeded, because firefox shown no problem, but when looked in IE, IE is very slow to render it, making it just unusable. I've been looking for a way around ,but i'm out of luck so far, so i thought i'd seek advise on this forum. Maybe you can tip me in the right direction ! An image is worth a thousand words, so please have a look at the attached image, it summarizes the screen structure. As you can see, the only scrollable area is the center orange zone : "viewport". thank you for your time and help ! Alexandre i want to add styles to the text area content such as bold, itallic, indent, color and size (like our fourms Post new Thread text area). how is it possible wating for ur reply bye Hi, Can anyone recommend how best to how to dynamically constrain amount of Text/Content in a DIV area that can vary in size?? That is, say you have: (a) a content (DIV) area on your view that can expand/contract depending upon browser size ( i.e. when someone is re-sizing the browser window) and (b) dynamic text/content that is to be displayed, based upon user input - e.g. image a defined area/size for several user comments for example. Users can create their own comments, but you only want them to be able to take up a given amount of screen resource, and then perhaps have a "...more" link at the bottom if they go over. How can I best setup this up? e.g. (1) How to setup the layout/CSS so that if more text / content is present in the DIV area that can be displayed that the DIV area doesn't expand due to the extra content the user put forward, and/or (2) Do I need to also complete this by programming what content comes out? E.g. in Ruby on Rails say then the question would be how to calculate how much text/content can fit in the current size of the DIV (noting browser re-sizing) so that you get the chance to put the "...more" link at the bottom? Hopefully this approach isn't required. Any other suggestions welcome that address what I'm trying to do are welcome, which is really offering a area for display of user feedback where each piece of feedback has a maximum area it can take on the main screen only, and also that browser re-sizing is possible. Tks Greg |
|||||||