|
CSS - Various Positioning Problems In Ie And Safari
I was told earlier that absolute positioning was a bad practice, at least to do it excessively in code, so I learned about margins and floats and fixed my page to where I want it. I test my page in Firefox 3 and Safari 4 (beta) and they both look exactly how I want the page to look. However, IE doesn't like a few things:
1. The top header positioning doesn't match up where it should (leaving yellow showing, which I placed behind the images to make sure I was aligning the images correctly rather than using the same background color). 2. The navigation by letter (A-Z and View All) is positioned right under the light blue bar when it should be in the middle of the light blue bar. Safari 3 has the same problem mentioned in #2 but is positioned level with the bottom of the light blue bar. Any suggestions and solutions would be most appreciated as I have tried looking for some explanation/solution to this problem for a few days now. Thanks ahead of time. P.S. the link is advance.byu.edu/sgtest Similar TutorialsStill learning CSS and trying to position simple text inside a layer on my clients site: The CSS positioning and font size are all appearing different in Safari (MAC), IE and Firefox. What am I doing wrong here? Go to : http://www.fractiousmusic.com At the bottom left corner I am trying to position the Steady Systems text. IE - looks fine Firefox - slightly positioned to the right Safari - completely out of wack. Covering one of the band member silohouettes and the font size is all wrong. Please view source and let me know if its a code error. Thanks! Daniel I have tested in Mac FF and Safari and PC FF and my page appears correct. In IE7, the images at the bottom (#bottom) don't match up (with #nav). If I delete the 10 px padding on #bottom, it appears correctly in IE7, but not the other browsers. Can anyone tell me why this is happening? Is there a bug fix somewhere? Unfortunately, this forum won't let me post my url because I'm new, so I'm not sure how to describe what is happening without a visual, but here goes: I have a background image that encompasses the entire page. Because of my rollovers on my images at the bottom (contained in #bottom), I kept the background when making the images. The background on the images in #bottom do not match up with the background, thereby creating a disjoint, or "leap," between #nav and #bottom. Why would this happen in IE7 and not FF or Safari? (See first paragraph for padding explanation.) css: @charset "UTF-8"; #outer { width: 723px; background-image: url(images/art_bground.jpg); background-repeat: no-repeat; position:relative; float: none; margin: 0 auto; } #bottom { margin: 0px; height: 312px; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; img display: block; } #body { margin-top: 0px; margin-right: 25px; margin-bottom: 0px; margin-left: 260px; height: 208px; padding-top: 25px; padding-bottom: 0px; } a:link { color: #c33b03; text-decoration: none; } a:visited { text-decoration: none; color: #996600; } a:hover { text-decoration: none; color: #6a2e09; } a:active { text-decoration: none; color: #6a2e09; } .text {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #6a2e09;} .navtext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bolder; color: #c33b03; margin-top: -10px; } .bold { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bolder; color: #c33b03; font-style: normal; } #nav { margin-top: 0px; margin-right: 25px; margin-left: 520px; margin-bottom: 0px; height: 178px; } Hi all, new to the forum. Can't figure out why my absolute positioned images are moving with the window in safari? perfect in FF and IE. please help! yogadebra dot com Hi there, currently, my site uses CSS and it works perfectly in FF and IE. But when it comes to Safari, it doesnt seem to pull the CSS up properly, if at all. (www.nsma.com/store) Just wondering if anyone can help/shed light on this. the css file is at store/stylesheet.css. Im offerin payment if u can help. paypal is best for me, let me know Many thanks in advance I have a new site at www.sdgolflessons.com. Looks fine in all browsers, including Safari, until I changed the doc type to strict (from the default loose in my Dreamweaver), and now Safari has odd gaps. I don't have much CSS for formatting, so I can't figure out what's going on. I've tried to force heights, make sure paddings are 0, etc., to no avail. I'd appreciate someone checking it out. I have Safari on a PC, though I'm not sure if that matters. Hey guys i have some image layout problems with my images on safari and firefox on Mac only. Firefox and safari on PC seem fine but its only happening on Mac. The positioning of the images have moved dramatically. Not sure how to fix it CSS is validated and so is xhtml strict hello. i'm using a CSS tutorial and DREAMWEAVER to build a website. i find that the site is interpreted the way i would like it in either Firefox or Safari...but not in IE. When links are hovered over while using IE, the page distorts. has anyone experienced this type of problem before? thank you in advance for your time and assistance! i did post several explanatory screenshots to illustrate the problem. replace each "@" with a period. mea culpa. www@wwpea@net/screenshots@htm Hi all, After the latest update of Safari, my Web site has gone all Wonky in the layout. The problem occurs in table cells where there is both a field and some text. If I put a <b> bold tag on some text in the row or even a <span> with special style attributes like plain text, the text jumps up and becomes almost a superscript and the rest of the text remains at the baseline of the text input fields in the row. I uploaded a picture, not sure how to link it into the posting though. The forms on our site are old, 7+ years, so have been beautifully laid out until this latest Safari release. It used to only be IE that messed up formatting with each release. This is the first Safari release I have seen do this. Can anyone else confirm similar issues? Can anyone give me a hint on why the css/javascript controlled dropdowns don't appear right on this page in Safari: http://spa.american.edu As you can see in the view source the script is very basic and not embedded in an external file. Safari cuts off a portion of the final link. Thanks, Jeremy Hey guys, I'm in need of some help here. Okay, so. My site looks the way I want so far on google chrome and safari (mac). And right now I'm at the stage of getting it to display like the two. If anyone who decides to help doesn't have access to certain browsers, I'll further explain, but I think it's easiest said to see for yourself. Right now I'm focusing on ie6, ie7, ff3. The markup in some areas is whacky, I know, but I decided to pick up where I left off on this project (which I first began building awhile ago) instead of starting completely over with a good template. http://thecheckoutplace.com/compute...eOneNetbook.php If anyone can offer a hand, it means a lot. Cheers guys. http://www.ror.twisted-delusions.net/flip2/ I can't seem to get those words of testing to stay where they should be which is above the footer. Why is the footer div going up so high? What I currently have is Code: <div id="main"> Site content comes here </div> <div id="bottomLinks"> <div style="float: left">A link</div> <div style="float: right">Copyright notification</div> </div> Code:
#bottomLinks {
padding: 10px 0px 10px 0px;
margin: 0;
width: 750px;
position: absolute;
bottom: 10px;
}
#main {
background-color: #FFFFFF;
width: 760px;
font-family: Arial;
font-size: 12px;
padding: 30px 0px 0px 40px;
}
As you can see, I'm trying to put the link & copyright notification at the bottom of the page. My problem occures when the site content is so long that there will be a scrollbar. Opera will handle this the way I want it to, meaning first the content and then at the very bottom of the page there will be the link and the notification. However Firefox and Konqueror doesn't work this way. They both put the bottomLinks 10 pixles top from the VISIBLE part of the page, overlapping the actual content. If the content is long enough, it could mean that bottomLinks is in the middle of the page. Any ideas how to fix this? If only you could have the best of both worlds... http://www.ror.twisted-delusions.net/bluelayout/ I want it so the logo is in the bottom left of the banner and so there is no space between the banner and the menu. Also, IE seems to mess up just about everything. The menu is far taller than the called for 32px as evidenced by the red that should not be showing. It also throws the side shadows all out of position A little help please? http://www.ror.twisted-delusions.net/bluelayout/screen.css Hi... I'm a complete noob at this hand coding thing... this is my first site, and my page and css are very simple... Everything looks great in FF, Chrome, Safari, but the positions is really wacky in ie 5-8. I'm baning my head against the wall for some time now and any help would be so appreciated! the page is tribal miami art show dot com. Thank you! Hi all, I am having major issues with positioning my footer, on IE it sits way down out of site, on Firefox it is perfect and on Safari it sits above the bottom of the screen, three totally different results! This is one of the last things that needs sorting, so please help if you can as I seem to have run out of talent! 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">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<title>Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* mac hide \*/
html, body {height:100%}
/* end hide*/
body {
padding:0;
margin:0;
color: #000000;
}
#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header{
position:absolute;
top:0;
left:0;
bottom: 0;
width:100%;
height:210px;
border-top:0px solid #feffff;
border-bottom:0px solid #feffff;
overflow:hidden;
color: #000000;
}
#clearheader{height:240px;}/*needed to make room for header*/
* html #footer {/*only ie gets this style*/
\height:40px;/* for ie5 */
he\ight:38px;/* for ie6 */
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 0px white;
}
#navlist li a {
color: #4E261B;
text-decoration: none;
font-family: palatino linotype, helvetica, sans-serif;
font-size: .90em;
line-height: 200%;
}
#content {
background-color: white;
height: 100%;
padding-bottom: 40px;
padding-left: 200px;
padding-top: 0px;
}
#footer {
width:100%;
clear:both;
border-top:0px solid #000;
background-color: #8ecce7;
color: #000000;
text-align:center;
position: bottom;
min-height: 100%;
}
#footerlist a
{
text-decoration: none;
color: #4E261B;
font-family: palatino linotype, helvetica, sans-serif;
font-size: 8pt;
}
p{
font-family: Palatino Linotype;
color: #336699;
font-size: 12pt;
text-decoration: none
}
p2{
font-family: Palatino Linotype;
color: #336699;
font-size: 8pt;
text-decoration: none
}
a{
font-family: Tempus Sans ITC;
color: #4E261B;
font-weight: bold;
font-size: 14pt;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img border="0" src="images/Banner_flat.jpg" alt="Banner" width="100%" height="210" align="left" />
</div>
<div id="clearheader"></div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 1; left: 3px; top: 217px" id="layer1">
<img border="0" src="images/bridetablet1.bmp" alt="Menu" width="190" height="302" /></div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 2; left: 14px; top: 248px" id="layer2">
<div id="navcontainer"></div>
<ul id="navlist">
<li><a href="hello" class="c2">Home</a></li>
<li><a href="About%20Us" class="c2">About Us</a></li>
<li><a href="User%20Register" class="c2">User Register</a></li>
<li><a href="User%20Log-In" class="c2">User Log-In</a></li>
<li><a href="Supplier%20Log-In" class="c2">Supplier Log-In</a></li>
<li><a href="Join" class="c2">Join</a></li>
</ul>
</div>
<div id="content">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div id="footer">
<p2>
<a href="test1.htm" title="Terms and Conditions" style="text-decoration: none"><font size="2">
Terms and Conditions |</a><font size="2">
</font>
<a href="test2.htm" title="Advertise" style="text-decoration: none"><font size="2">
Advertise |</font></a><font size="2">
</font>
<a href="test3.htm" title="FAQ's |" style="text-decoration: none"><font size="2">
FAQ's |</font></a><font size="2">
</font>
<a href="test1.htm" title="Site Map |" style="text-decoration: none"><font size="2">
Site Map |</font></a><font size="2">
</font>
<a href="test1.htm" title="Wedding Hair |" style="text-decoration: none"><font size="2">
Wedding Hair |</font></a><font size="2">
</font>
<a href="test1.htm" title="Wedding Makeup |" style="text-decoration: none"><font size="2">
Wedding Makeup |</font></a><font size="2">
</font>
<a href="test1.htm" title="Wedding Beautician" style="text-decoration: none"><font size="2">
Wedding Beautician
</font></a>
</font>
</p2>
</wrapper>
</div>
</div>
</body>
</html>
Thanks, G Well, I'm working with CSS and div tags using the id attribute. I'm trying to copy a box that's already on left side of the page but put it on the right side of the page and make it not so wide. Here's what the box on the left looks like: The code for that is: Code: <div id="nav">
<a id="selected">Home</a>
<a href="?page=forums" class="link">Forums</a>
<a href="?page=downloads" class="link">Downloads</a>
<a href="?page=contact" class="link">Contact</a>
<a href="?page=roster" class="link">Roster</a>
<a href="?page=server" class="link">Server</a>
<a href="?page=matches" class="link">Matches</a>
<a href="?page=links" class="link">Links</a>
<a href="?page=search" class="link">Search</a>
</div>
<div id="title">News</div>
<div id="content"><?php include('includes/news.php'); ?></div>
Code: /* Navigation div **** */
#nav { height: 17px; width: 513px; padding: 6px 0px 0px 0px; }
#nav a:hover {
background-color: #660000;
border-top: 1px;
border-bottom: 0px;
border-left: 1px;
border-right: 1px;
border-style: solid;
border-color: #000000;
font-weight: bold;
width: 10px;
padding: 5px 5px 5px 5px;
}
/* Main content **** */
#title {
background-color: #660000;
border-top: 0px;
border-bottom: 0px;
border-left: 1px;
border-right: 1px;
border-style: solid;
border-color: #000000;
width: 506px;
text-align: right;
padding-left: 5px;
}
#content {
background-color: #202020;
border-top: 0px;
border-left: 1px;
border-right: 1px;
border-bottom: 1px;
border-style: solid;
border-color: #000000;
text-align: left;
padding: 5px 5px 5px 5px;
width: 501px;
height: 400px;
}
The right side box SHOULD look like this: but that's me photoshopping it. Here is my code that I tried for the right side: Code: <div id="nav_right"> <a id="selected">Home</a> <a href="#" class="link">Affiliates</a> <a href="#" class="link">UserCP</a> <a href="#" class="link">Log out</a> <a href="#" class="link">Credits</a> </div> <div id="title_right">title right</div> <div id="content_right">content right</div> Code: #nav_right {
height: 17px;
width: 285px;
padding-top: 6px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
float: right;
}
#nav_right a:hover {
background-color: #660000;
border-top: 1px;
border-bottom: 0px;
border-left: 1px;
border-right: 1px;
border-style: solid;
border-color: #000000;
font-weight: bold;
width: 10px;
padding: 5px 5px 5px 5px;
}
#title_right {
background-color: #660000;
border-top: 0px;
border-bottom: 0px;
border-left: 1px;
border-right: 1px;
border-style: solid;
border-color: #000000;
width: 278px;
text-align: right;
padding-left: 5px;
float: right;
}
#content_right {
background-color: #202020;
border-top: 0px;
border-left: 1px;
border-right: 1px;
border-bottom: 1px;
border-style: solid;
border-color: #000000;
text-align: left;
padding: 5px 5px 5px 5px;
width: 273px;
height: 400px;
float: right;
}
But it ends up like this: Any help on this would be appreciated. Hi everyone, I'm having a brain freeze and need a smack in the back of the head. I simply want to place some content below the left side menu. I want all content below the menu to be independent of the menu which has a grey background. Here is a link... www.spotabusiness.com It will make sense once you see it. Thanks for any input. Rob Hi all, Im assuming I have a pretty basic problem, but with me being semi new to css Im struggling. Im trying to make my main white block in the centre of the page extend to the bottom of the page (commonly used I know) but at the moment there is a gap, I want it to extend to the bottom regardless of how much information there is. Also I added a navigation bar which is fine in 1024 resolution but in other resolutions it moves out of position. Here is the css I have so far: #mainarea { position:static; top:0px; margin-left: auto; margin-right: auto; width:800px; height:600px; background-color:#ffffff; } #navi { position:absolute; top:153px; left:106px; width:790px; height:40px; background-color:#000000; } Thanks in advance After a lot of effort, I'm making things worse, and not better! The page in question is he here. I had everything lined up except for the column ofthree alternate image views to the right of the primary image. While trying to get these to align vertically with the bottom of the primary image, I have broken the layout for the whole page... What's now broken: #content is no longer aligning with the top of the left nav (margin-top:40px) as mentioned above, I need the column with the three smaller images to align with the bottom of the larger image, floating up and down based upon the larger image's height. the "next >" link is not vertically aligning properly with the bottom of the image in FF. And, of course, I need to get the whole thing working in ie. Before coding, I laid things out semantically, planning to float:left the nav and content boxes within the centered #main div. This was working before I broke it. :-( I'm very new at this, and am doing my best! But I feel like I might go insane at the moment... Thanks, in advance, for your help. -BBD I'm trying to use CSS to format a gallery component of a CMS I'm building. At the moment I'm failing miserably! You can see an example of the page I'm trying to sort out at http://www.geoffsoper.co.uk/albums/181_highlights.htm but there's a simplified test case at http://www.geoffsoper.co.uk/test_bed/index.htm which should be self-explanatory. The first problem is that I want the text of element 1 to start a new line when it reaches the drop down menu of element 2 but at the moment element 2 is displaced downwards. Element 1 and 2 should have their tops level. Secondly element 3 is taking its vertical cue from the bottom of the menu div due to the clear:left. Instead I want it to be immediately below elements 2 and 3 and then to have the images and descriptions directly below element 3. Finally I don't want the text of the description to flow under the image, I realise I could put a big margin-left value on the description divs to clear the image but I don't really want to rely on knowing the size of the image. If anyone can show me how I should be curing these issues I'd be very grateful! Thanks, Geoff |
|||||||