|
CSS - Css Positioning Issue On Browser Re-sizing
Hi everyone,
I've been fixing my blog's CSS issues, and managed to figure out everything expect for 1 thing: If you re-size the browser's window or use CTRL+mouse scroll to zoom in/out, you will notice that the nav menu doesn't follow the rest of the layout, but gets positioned on its own somehow. URL : howtohollywoodvideo dot com Here's my CSS for the layout. Header Logo Nav Menu #header { background: url(images/header-bg.jpg) bottom left repeat-x; width: 100%; float: left; } #header-left { /* For the Logo */ width: 490px; float: left; padding: 5px 0 5px 0; #navigation { width: 100%; float: left; color: #fff font-color: #fff; font-size: 18px; font-family: Verdana; } What is the solution for my problem? I tried position: properties, but nothing could make the menu get re-sized the same way as the rest of the layout. Similar TutorialsHi Everyone I have created a design in CSS and HTML but it appears differently in all of the browsers that I have tested it on can anyone take a look and tell me where I am goin wrong? HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
<body>
<div class="wrapper">
<div id="hometext" style="background-color: transparent">{content}</div>
<div class="mainbody" style="background-color: transparent">
<div class="headermenu"><a href="http://live.orotor.co.uk">Home</a> | <a href="http://live.orotoro.co.uk/index.php?page=stock">Stock</a> | <a href="http://live.orotoro.co.uk/brochure.html">Brochure</a></div>
<div class="headerlogo"><img src="img/logo.gif" border="0" /></div>
<div class="washingline"><img src="img/washingline.png" border="0" usemap="#Stock" />
<map name="Stock" id="Stock">
<area shape="poly" coords="47,151,129,159,136,96,142,98,156,82,141,56,115,46,82,43,55,45,33,71,44,86,52,88" href="#" alt="Apply here for Credit!" />
<area shape="poly" coords="199,182,282,187,283,123,289,125,306,106,285,81,262,74,228,75,202,80,180,105,194,122,198,118,200,121" href="#" alt="Our Garment Specifications" />
<area shape="poly" coords="384,196,467,193,465,130,471,130,483,112,463,88,438,82,407,82,380,90,360,115,373,132,381,131" href="#" alt="Look at our Wonderful colours" />
<area shape="poly" coords="627,181,700,143,671,86,678,86,682,61,652,50,627,55,598,69,578,89,570,121,591,130,598,126" href="#" alt="See our latest stock levels" />
</map>
</div>
<div style="position: absolute; top: 530px; height: 99px; width: 793px; margin: 0 auto;"><img src="img/footerbanner.png" border="0" /></div>
</div>
</div>
</body>
</html>
CSS Code:
body {
margin: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12.5px;
font-weight: 600;
overflow: hidden;
}
a {
text-decoration: none;
color: #000000;
}
input
{
height: 20px;
width: 250px;
border: 1px solid #e7ca3c;
background-color: transparent;
color: #000000;
}
textarea
{
height: 100px;
width: 249px;
border: 1px solid #e7ca3c;
background-color: transparent;
color: #000000;
}
a:hover {
text-decoration: none;
color: #e7ca3c;
}
.wrapper
{
margin: 25px auto;
width: 794px;
height: 748px;
text-align: center;
overflow: hidden;
}
.mainbody
{
width: 794px;
height: 748px;
background-image: url(img/background.gif);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
border-top: 1px solid #e7ca3c;
}
.headerlogo
{
width: 368px;
height: 134px;
float: left;
clear: right;
margin: 5px;
position: absolute;
background-color: transparent;
}
.headermenu
{
width: 300px;
float: right;
margin: 5px;
padding: 59px 0px 59px 59px;
position: relative;
text-align: right;
}
.washingline
{
width: 793px;
height: 217px;
position: absolute;
top: 260px;
}
#hometext
{
position:absolute;
left:250px;
top:189px;
width:729px;
height:153px;
z-index:1;
}
Any help would be really appreciated as I am really flumoxed here. Best Justin Is there anyway to stop someone from changing the text size with their browser? Before everyone starts shouting "NO DON'T DO THIS!", I don't want to do it for everything. I have some buttons that are created with CSS and lose the formating when the text size is changed. I tried adding: Code: font-size:8pt; but that didn't work. Hello, I have my XHTML code in CSS to insert an image at the top like this: Code: <div id="award">
<img src="images/award.gif" alt="Year Award" />
</div>
#award
{
position: absolute;
top: 30px;
left: 400px;
z-index: 99;
}
When I resize my browser this image just changes its position and moves across the page. And all my content is set to auto margin on left and right. How do I make it fix into a position and wont change during resizing or the browser? Isnt it annoying when you have created a fantastic design with unordered list menus, its looks very fantastic then you open it up on someone elses browser and the design breaks because they have increased/descreased the text size through the browser. One alternative to this is to use text sizes that prevent modifying the text size through browser. However, this doesnt FIX the problem, it only prevents it which means old lady wont be able to read your site. My main problem is the fact that I have background images and when I increase text size, the text increases, but the background images to steatch with the content. Anyway to fix this? Is there a way to get IE to display an element's size properly when the element contains another larger element within it? OK, so I have two divs. Div1 has a height of 150px. Div2 contains an image that is 200px which I want to "overhang" below the first div's bottom border. So my code looks roughly like: Code:
<div id="one" style="height:150px; background-color: #EEEEEE;">
<div id="two" style="float:right; position:relative; top:115px; margin-right: 15px;>
<img src="someImage.gif"/>
</div>
</div>
Firefox displays this properly, maintaining Div1's height at 150 and pushing Div2 down so that it hang's over. IE allows Div2 to hang, but it resizes Div1 to be 200px. How can I stop IE from expanding the height to be larger than what I define it to be, even if a child element is larger? Hello all, I'm a copywriter who's recently been forced into web design by my boss because of general tech savvy. I've replaced his old ugly website with a new, prettier one. I would post a url but it says I'm a new user and I can't - I don't know when that ban gets lifted. I did the layout with a table which I KNOW is incorrect and will make further development difficult, but my boss insisted and I don't feel too bad about it as this really isn't what I'm being paid for. (If he wants a correct, professionally designed website he can hire a professional web designer to do it correctly). However, there is one issue I'd like to fix, if I can. On the second, third and fourth pages (What Vehicles We Buy, FAQs, and Why Sell to Auto Buyer?) the table sizes incorrectly in IE 8 - but not in Firefox, Chrome or any phone I've been able to check it on. If you can open it in IE you should see what I'm talking about. Right off the bat, the navigation bar near the top is too low, and it gets worse the farther you get down the page. The images in the middle are way off. This is only the case on these three pages, all the site's other pages are fine. I'm at a loss on how to fix it. If I need to post the full code for you to see, I can do that but I don't want to clutter this post if it's not necessary. Here's the style codes for the background image and the table, respectively: #bg { vertical-align: top; width: 1601px; position: absolute; top: 0; left: 0; } #Table_01 { vertical-align: top; width: 1601px; position: absolute; top: 0; left: 0; } If anyone can see why I'm having a problem, I'd be extremely grateful. Thanks in advance. Hi all, I have a webpage that creates a dynamic set of tables (2) based on information from MySQL. The problem is, I have a footer graphic that is positioned relative to the table depth (so it sits nicely underneath no matter how deep the table gets). On my pc and browser (IE 6.028) it works fine when the footer include sits just before the </div> statement for the content of the page. But on another pc, same IE version, the footer graphic aligns itself with the second table and overwrites it. I've tried all manner of things to get it to work, but no joy. Right now I have added another quick CSS class to hardcode it to a specific height. Is there anyone who can explain why 2 identical browsers display 2 different results (I have cleared the cache) Ben i current have the following css layout applies to a div on my webpage Code: #builds {
position:relative;
left:17px;
padding-top: 125px;
padding-bottom: 55px;
}
this gives me the crrect positioning in firefox and google chrome however when i try and load it in ie the positioning is totally wrong. i have tried using the Code: margin: 0px auto 0 auto; value as thi div is centerd within another however then this works in ie and not firefox or google chrome. does anyone have any ideas of anything that will work for all browsers? or even just ie, firefox and google chrome Regards, Jamie As a web designer I am usually able to debug any css issues myself (as it should be, lol). However, I have run into a problem with two browsers rendering differently that I cannot figure out. If you have a look at the following link in both chrome and safari, you will see the number of views is positioned differently in both. http://www.linkpast.com/profile/250/peterthomas/ Any idea as to what is causing this and how to fix? Hi everyone, For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine. So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html but I don't see what he did to solve it. Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating . I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions. Thanks in advance if you can give a DIV newbie a heads up. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>
I'm having a few related problems... 1. I want the Flash picture slideshow centered vertically and horizontally in its div id="flashbox", when viewed in IE 6 & 7. 2. Also when viewed in IE 7 the graphic buttons in the div id="topright" are overlapping text in the div id="rightcolumn" 3. And finally, the the graphic buttons in the div id="topright" do not fill up their space at the bottom when viewed in IE 6 & 7. Any ideas on any of these issues is much appreciated. Thank you in advance. The link to the page in question is: http://www.oharenoise.org/new/index.htm I'm new to CSS layouts, and being a relic who was always happy using tables, it's causing me some headaches! My latest conundrum involves trying to align a row of text to the bottom of an otherwise empty div. Here is my attempt, using colors for illustration only. (This is of course only a simplified version of my design, so while the "outer" DIV might look superfluous it has to be there. In my real design it is wider and contains three DIVs side by side - "box3" being just one of them.) Code: <html>
<head>
<style type="text/css">
#outer {
position: absolute;
float: left;
width: 228px;
height: 196px;
margin-top: 0px;
}
#box3 {
float:left;
width:228px;
height:196px;
background-color: green;
text-align:right;
display: table;
#position: relative;
overflow: hidden;
font-weight:bold;
}
</style>
</head>
<body>
<div id="outer">
<div id="box3">
<div style=" #position: absolute; #top: 50%;display: table-cell; ">
<div style=" #position: relative; #top: -50%; background-color: yellow;">
<p style="bottom:0;right:0;position:absolute; background-color: red;">
some <i>text goes here</i>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
It looks fine in Firefox and Chrome, even if I don't quite understand why the text is elevated slightly from the bottom - that's okay. But in Internet Explorer, the text is nearer the top, and squashed to the right-hand side so that it's forced to wrap onto multiple lines. The forum won't let me post an image so see if you can decipher this URL: ht tp :// i49 .tiny pic. com /j8znti.png Can anyone help me adjust the code so that it displays in IE the same way as in Firefox and Chrome? I'd really like to understand why it's so different and how to prevent a similar problem in future. Many thanks! Even though the text in the div is positioned where I want it to be in DW, it doesn't display correctly in the browser. Here's my screenshot: img367.imageshack.us/img367/8152/picture2on5.th.png add http:// to the front Here's my CSS: @charset "UTF-8"; /* CSS Document for index.html*/ body{ background-color: white; } #index_bg{ background-image: url('index.gif'); background-position: top center; background-repeat: no-repeat; width: 473px; height: 153px; margin: 0 auto; overflow: hidden; } #index_text_welcome{ margin-top: 15px; margin-left: 15px; width: 180px; height: 30px; color: #999; font: x-small Verdana, Arial, Helvetica, sans-serif; } #index_text_enter{ margin-top: 10px; margin-left: 180px; width: 110px; color: #666; font: small Verdana, Arial, Helvetica, sans-serif; line-height: 20px; } #index_text_download{ margin-top: 30px; margin-left: 15px; width: 75px; color: #CCC; font: x-small Verdana, Arial, Helvetica, sans-serif; } #index_footer{ background-image: url('index_footer.gif'); background-position: top center; background-repeat: no-repeat; width: 700px; height: 50px; margin-top: 200px; clear: both; float: none; margin-right: auto; margin-bottom: auto; margin-left: auto; z-index: auto; } #index_footer_text{ margin: auto; margin-top: 12px; margin-left: 250px; width: 250px; color: #CCC; font: x-small Verdana, Arial, Helvetica, sans-serif; text-align: left; vertical-align: baseline; } a{ text-decoration: none; color:#666 } a:hover{ color: #333; } p.s i'm in a hurry n i'll edit this post later..i just want to see replies first http://www.testers.info/webdesign/viva/aktuelles/ Both boxes in the centre are placed inside a table cell and are positioned via a <div> Tag using "position:relative": Code: .parent {
left: auto;
top: auto;
position: relative;
}
basically everything works fine but when you're using Internet Explorer and resize the page vertically (horizontally works fine) the boxes behave like they're positioned static. What declarations do I need to write in my style sheet to make the boxes stay in their table cell? P.S.: I already searched the web for about 2 hours on this topic. For my website at btccaction.co.uk I have chosen a CSS menu at the top as the ideal solution. However I'm having some problems positioning it so that the menu is in the same position in both Firefox and Internet explorer, and on various screen sizes. Does anyone have any tips for me here regarding positioning elements such as this so that they appear in the same position no matter what the operating system variables? For reference I'm using the code from he http://www.cssplay.co.uk/menus/ultimate.html Any help kindly appreciated. Andy Hello Guys, I am trying to get the the css to work but having a hard time with it and need some help.. Here is the content lined up in fire fox. http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png Ad this is what it looks like in IE (See my issue) http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png Here is the code Code: echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'"> Read more</a></span>>>></div>'; Here is the CSS Code: .listing {
width:560px;
height:auto !important;
margin: 0 auto;
text-align: left
}
.listlink {
float:left;
margin-left: 10px;
margin-top: 20px;
position: absolute;
text-decoration:underline;
}
.listbody {
float: left;
margin-left: 110px;
margin-top: -30px;
width:440px
}
.listingdiv{
border-bottom: 2px dotted #9EABB5;
color:#FFF;
}
Please advise how to fix this.. Thanks for your help in advance.. Dan greetings. i have a small problem. i have a relatively positioned layer and an absolutely postioned layer. i want the rel layer to appear visually below the absolute layer. i'm not referring to z-index. simply i have a header layer and content layer. the header is absolute and the content is relative, BUT IE6 is demanding that in my code, i put the content first and header second. also if I drop the width property from the content/relative layer IE6 will allow me to have the absolute layer ontop of the relative layer in my markup. examples to be viewed in IE6 win. appears proper but was coded backwards Page appears correct, Header on top, content below BUT in the code the layers are in the wrong order. Coded in correct order but margin ignored Here the layers are coded with top layer first and bottom layer second. IE drops the top margin of the content layer and rams it to the top of the page. THIS IS THE PROBLEM Coded in correct order but i dropped the width attribute In this example the layers are coded in the proper order and they display properly but only if i remove the width attribute from the relatively positioned layer. i would appreciate any help. the page i'm working on is much more complex so although i can get both browsers to display properly, i don't like having the code for my navigation at the bottom of the page. thanks alot! carl Hi I am not really very familiar with the positioning element. I have a site that has a fixed width in the center of the page. It all works fine. However there is a hidden box that pops up when you enter any text in the newsletter box at the top right - this appears outside of the fixed width and I cannot understand why it is allowed to do so. I notice that it does have "absolute" positioning defined in the CSS. Any clues as to what I can do to bring it back to its correct place under the newsletter box? Thanks a lot Site: http://www.componentcompare.com |
|||||||