|
CSS - My 100% Nightmare
Hi All,
I'm new to the forum and hoping someone can help me. This is the first page I have done using CSS for defining my layout so some patience would be appreciated. I also apologize if this has been discussed somewhere else on the board - I'm not entirely sure what to search for. On the page I have a background set - a nifty little drop shadow effect to frame the main content. Everything works until I try a lower screen resolution - the effect gets cut off depending on the size of the browser window even though the content goes well beyond. I have tried everything I can think of to solve this! Please tell me there is a fix! If not - maybe a fellow web devloper could offer an alternative solution? The website is: iconoclast-band.com/new I've posted a screen of the problem: iconoclast-band.com/new/iconoclast-argh.jpg Stylesheet is at: iconoclast-band.com/new/css/style.css Positioning css is: html, body { min-height: 100%; height: 100%; } body { font: 11px/1.6 Arial, sans-serif; background: url(../images/bg2.png) top center repeat-x !important; background: url(../images/bg2.gif) top center repeat-x; /*stoopid ie*/ padding-left: 1px; margin: 0 auto; overflow: -moz-scrollbars-vertical; } body, h1, h3, p { padding: 0; margin: 0; } #container { background: url(../images/container2.png) top center repeat-y !important; background: url(../images/container2.gif) top center repeat-y; /*stoopid ie*/ width: 791px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; /*stoopid ie*/ } #left { float:left; width: 200px; padding-top: 91px; background: url(images/bg2.png) top center repeat-x !important; background: url(images/bg2.gif) top center repeat-x; /*stoopid ie*/ } #header { background: url(../images/headbg.png) top center no-repeat; background: url(../images/headbg.gif) top center no-repeat; /*stoopid ie*/ height: 91px; width: 361px; padding-left: 30px; margin-bottom: 0 !important; } #content { width: 361px; padding-left: 15px; } #footer { text-align: center; width: 361px; padding-bottom: 20px; } #right { float:left; width:200; margin-top: 81px; } Similar TutorialsSo I'm working on this site. deborahgunn-interiors dot com (new user issue) my problem is that everything works acceptably well in most browsers. IE on the other hand is a freaking nightmare, throwing everything out of position and even things outside of my div container making me scroll considerably just to view the content. If anyone could take a look and give me some pointers that would be great. I have a menu bar that is positioned by css. It works exactly as it should on all browsers, except IE7 http://www.firstpokertips.co.uk/ In IE7 the menu is offset up and to the right of where it should be. Can anyone help. I have been trying for many many hours but just cant work out what is wrong. Alright, here we go again. The page in question... Various screenshots I'm working up a sample for a job I came across. The scenario: He wants a simple layout: top header, left column, mid (main), right column, and bottom header. The width of the body should be no more than 650 pixels and centered. However, he wants the html flow to be in order of: main, top header, left column, bottom header, right column. Obviously is going to require absolute positioning, right? So, using Win XP, I got it to look descent in IE 6, Net 7, and FF 1. Those are the three browser brands he's concerned about; the last two versions of each (didn't specify operating system). Basically, I'm just asking for someone to look at the source code and tell me if there's a simpler way. The way it's set up now, it renders poorly on several different versions of IE, Net, and Moz under other operating systems (which you can view in the screenshots URL above). Plus, the heights are not constant. Meaning that he will always be adding/changing content meaning he'll always have to mess with the positioning. Is this absolutely worthless? Problem is I don't want to give up because it is fun to learn (plus there's two other potential jobs behind it). It's starting to seem, however, that there will be no easy fix and perhaps the answer is unachievable in this situation. Any advice? Dear all, I have the following in a web page: A menu (let's call it Menu1) with several links and by its side another menu (Menu2) with some links also. Menu2 is a drop down menu that drops down on top of Menu1 when you click the Menu2 button. Well, it works for Internet Explorer but not for Firefox. The problem: when I try to click on Menu1's links they are not clickeable .............. My divs: #divMenu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:1;} #divMenu2 {position:absolute; width:242px; height:218px; top:76px; left:705px; z-index:2;} Obviously if I do: #divMenu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:2;} #divMenu2 {position:absolute; width:242px; height:218px; top:76px; left:705px; z-index:1;} I cannot click on Menu2's links because the drop down disappears behind Menu1. How can I solve it?? Below, the code. Thanks a lot in advance! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
html {background-color:transparent;}
body {
background-color:transparent;
margin-left: 0px;
margin-top: 0px;
}
#Menu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:1; background-color:yellow;}
#Menu2 {position:absolute; width:0px; height:0px; top:76px; left:705px; z-index:2;}
-->
</style>
</head>
<body>
<div id="Menu1">
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF0</a><br>
<a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF0</a><br>
<a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF1</a><br>
<a href="http://www.yahoo.se" target="_blank">CANNOT click this link in FF2</a><br>
<a href="http://www.yahoo.es" target="_blank">CANNOT click this link in FF3</a><br>
<a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF4</a><br>
<a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF5</a><br>
<a href="http://www.yahoo.se" target="_blank">CANNOT click this link in FF6</a><br>
<a href="http://www.yahoo.es" target="_blank">CANNOT click this link in FF7</a><br>
<a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF8</a><br>
<a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF9</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF1</a><br>
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF2</a><br>
<a href="http://www.yahoo.it" target="_blank">Can click this link in FF3</a><br>
<a href="http://www.yahoo.fr" target="_blank">Can click this link in FF4</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF5</a><br>
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF6</a><br>
<a href="http://www.yahoo.it" target="_blank">Can click this link in FF7</a><br>
<a href="http://www.yahoo.fr" target="_blank">Can click this link in FF8</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF9</a><br>
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF10</a><br>
<a href="http://www.yahoo.it" target="_blank">Can click this link in FF11</a><br>
<a href="http://www.yahoo.fr" target="_blank">Can click this link in FF12</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF13</a><br>
</div>
<div id="Menu2">
<iframe src="http://www.vlogplaza.com/test/flash/menu.html" id="ifrmenu2" name="ifrmenu2" scrolling="no" width="262px"
height="218px" frameborder="0" allowtransparency="yes">
</iframe>
</div>
</body>
</html>
Have been bashing my head against the wall now for a few hours trying to solve this, as it's "the last piece of the puzzle" at the moment. Here is the issue: Code: http://img5.imageshack.us/my.php?image=iebugtj3.jpg (Sorry about this, had to put it in code to post the link) As you can see, it works perfectly in "all" other browsers, but... yeah... you know... >.> Nore sure how much of the code is needed to fix this, but here is the most relative code... HTML Code: <style type="text/css" media="screen">
#selectedTab
{
background: url("./images/layout/tabSelected.png") no-repeat;
height: 66px;
width: 129px;
position: relative;
top: -89px;
left: <?PHP echo $tabPos ?>px;
z-index: 5;
}
#selectedTab a
{
position: relative;
/* Special fix for the "ISO-sertifikat" string */
<?php
if ($_GET['nav'] == "isosert")
echo "top: 10px;";
else
echo "top: 15px;";
?>
left: <?PHP echo $tabTxtPos ?>px;
}
</style>
<!-- END CUSTOM MENU STYLE -->
<body>
<div id="pattern">
<!-- START HEADER -->
<div id="bg_layer2_header">
<div id="banner">
<div id="menu">
<div id="subtabs">
<ul class="menuTabText">
<li class="menuNudge"><a href="home.phtml?nav=omoss">Om Oss</a></li>
<li class="menuNudge"><a href="home.phtml?nav=nyheter">Nyheter</a></li>
<li class="menuNudge"><a href="home.phtml?nav=tjenester">Tjenester</a></li>
<li class="menuNudge"><a href="home.phtml?nav=kurs">Kurs</a></li>
<li class="menuNudge"><a href="home.phtml?nav=isosert">ISO-sertifisering</a></li>
<li class="menuNudge"><a href="home.phtml?nav=kunder">Kunder</a></li>
<li class="menuNudge"><a href="home.phtml?nav=forhandlere">Forhandlere</a></li>
<li class="menuNudge"><a href="home.phtml?nav=referanser">Referanser</a></li>
<li><a href="home.phtml?nav=jobb">Jobb</a></li>
</ul>
</div>
<div id="selectedTab"><a href="home.phtml?nav=<?PHP echo $_GET['nav'] ?>"><?PHP echo $linkName ?></a></div>
</div>
</div>
</div>
<!-- END HEADER -->
CSS Code: /**==--__ Global __--==**/
*
{
margin: 0;
padding: 0;
}
/**==--__ Layout __--==**/
body
{
background: #636363 url("../images/layout/bg_layer1.png") repeat-x;
height: 100%;
}
#pattern
{
background: url("../images/layout/bg_pattern.png") repeat;
position: absolute;
top: 0px;
left: 0px;
height: auto;
min-height: 100%;
width: 100%;
z-index: -3;
}
/* START HEADER */
#bg_layer2_header
{
background: url("../images/layout/bg_layer2_header.png") no-repeat;
height: 216px;
width: 980px;
margin: 0 auto;
position: relative;
z-index: -4;
}
#banner
{
background: url("../images/layout/banner.png") no-repeat;
height: 184px;
width: 909px;
margin: 0 auto;
position: relative;
top: 32px;
z-index: -2;
}
#menu
{
background: #000 no-repeat;
height: 25px;
width: 877px;
border-top: 1px solid #cbcbcb;
margin: 0 auto;
position: relative;
top: 158px;
}
#subtabs
{
background: url("../images/layout/bg_subMenu.png") no-repeat;
height: 48px;
width: 812px;
position: relative;
top: -28px;
margin: 0 auto;
z-index: -1;
}
#subtabs .menuTabText li
{
list-style: none;
display: inline;
}
.menuTabText /* Subtab links positioning */
{
position: relative;
top: 5px;
left: 16px;
}
.menuNudge
{
margin-right: 44px;
}
/* END HEADER */
im using this currently for internet explorer on a mouse over but it doesnt do anything.. the mozilla one works just fine IE Code: filter.progid:DXImageTransform.Microsoft.Alpha(opacity=70); progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310) progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3); Firefox Code: -moz-opacity: 0.7; |
|||||||