|
CSS - Desperate For Some Help (ie7 Problem).
Hello, I am a recent learner to css and web development. I am using a studiopress theme on a wordpress site.
the site is erashowcaseweb THe problem i am having is with the nav bar. in firefox and ie 8 it looks great, in ie 7 it does not and unfortunately my boss uses 7 lol. the strange thing is when i edit this code. #menu-default-menu { position: relative; top: -80px !important; left: 0pxpx; padding: 0 0 0 30px; to say 0px it aligns in ie 7 perfectly and ruins it in firefox and ie 8. ty for any help at all. i can't post any urls or attack files but if anyone has the time to pm me i will gladly send u the stylesheet and link. Similar TutorialsHey everyone! This is my first post here as I am bordering on throwing my laptop out of the window so I'm in dire need of some help! My problem is - I have a background image which consists of 2 columns and a main content area. I want this to be tiled vertically and to fill the width of the page (but not repeat.) But no matter what I try it will just hugely overflow the browser horizontally and so I'm only seeing the left column and half of the center part. This is a scaled down version of the image I'm using: ht tp://ww w.frontier-music.co.uk/example2.jpg This is driving me absolutely mental as I just expected there to be a quick fix for keeping the image within the browser size! This is the sort of thing I'm after: ht tp://ww w.frontier-music.co.uk/example.jpg If anyone could offer any sort of help I would be hugely greatfull as I'm having a bit of trouble getting my head around all of this code! ht tp://ww w.teddyzoo.com - This is a pretty similar background effect to what I'm after, the based my background image around theirs to try and work out what they had done! Many thanks in advance Josh EDIT - Sorry about the broken links, I wasn't allowed to post working ones. Hi guys, I recently started adding content to my website (www dot web-share dot org dot uk) but I have noticed that when the content overflows on the page, the divs do not follow suit! I have tried every trick in the book which includes at least 3 hours worth of searching for solutions that involving clearing, removing floating and use min-width but none of them work! I am pulling my hair out on this one... Please help before I go bauld! CSS File: Source of http:// www dot web-share dot org dot uk/Themes/Default/Original.css HTML File: Source of http:// www dot web-share dot org dot uk/index.php?a=news&id=1 Thanks in advance, Chris CSS alignment urgent help needed I only have 10 hours to hand in this assignment that I have been stuck on for 4 days, the instructions are so unclear! I need to apply a style sheet to a web page given and the question I am stuck on asks me to align the image and words under it to the right. I do not understand what the command I am supposed to use to tell it to move to the right are. Here is the markup for it: <DIV class=figure> <IMG alt="A happy face" src="Ex2-1_files/happy.png"> <P class=caption> Figure 1: Doesn't this make you happy? </P></DIV> I know its align: right; But what is the whole command I put in textpad? Tahnks so much! Hi, Opened a new post as its better. I am trying to do things for smaller devices such as mobiles and tablets. If I add something very simple in the stylecheat to the @media query such as background color of the body using this: @media screen and (max-device-width: 2000px){ body { width:766px; margin:auto; background-color:#00FF00;}} Or if I do this wich seem to have the same affect: @media screen and (max-width: 2000px){body { width:766px; margin:auto; background-color:#00FF00;}} I dont get the green background on the body, I only get it on my pc, on my samsung mini, on blackberry I dont get the green background and using adobe advice central on samasung tab and ipone 4 and maybe some more I get it, on the rest no background color. This is so strange, I imagen all have greater width than 2000px. If I set to max-width to 500 px I dont get it on my samsung mini either...????? it have a very small resolution, only 240 x something. I just dont get it I dont have any background color declared except the one in the @media query Hi, I have an issue that has been tormenting me to the sharp rusty end of my chair. I set the indexTableHeader class to width:100%, and in IE6 it does what i want, it doesnt leave the edge of the screen, but in FF 2.0 it Always extends out by the width of the div element beside it, making it nearly useless. In IE7 it is even worse, it clears the left div, and goes to the bottom. The goal is to have what it looks like in ie 6. I know the css code is pretty long, but if someone could give it a couple looks and let me know what they think that would be awesome. I really appreciate it. Thanks-Dave Code: <?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<style type="text/css">
html {
padding:0;
margin:0;
border:0;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
}
body {
padding:0;
margin:0;
border:0;
font-size:12px;
background-color: #A2C4EA;
}
#head {
margin:0;
width:100%;
height:60px;
background-color: #A2C4EA;
background-image: url(/holimages/hein75b.gif);
background-position: left;
background-repeat: no-repeat;
}
/*
*/
/* Nav menu, */
#submenu {
text-align: center;
background-color:#566d96;
width:100%;
}
#submenu ul {
display:block;
list-style-type: disc;
background-repeat: repeat-x;
margin:0;
}
#submenu ul li {
display: inline;
padding-right: 20px;
}
#submenu ul li a {
text-decoration: none;
font-size:12px;
color: #fff;
}
#submenu ul li a:hover {
text-decoration: none;
color: yellow;
}
#submenu h2 {
color:white;
font-size:12px;
display:inline;
margin-right:12px;
}
/*Guide bar */
#guide{
font-size:12px;
background-color:#fff;
width: 100%;
text-align: left;
margin:0;
}
#guide ul {
list-style-type: disc;
background-repeat: repeat-x;
margin:0;
}
#guide ul li {
display: inline;
padding-right: 0px;
}
#guide ul li a {
font-size:12px;
text-decoration: none;
color: blue;
}
#guide ul li a:hover {
text-decoration: none;
color: red;
}
#logo{
float:left;
position:fixed;
}
#cit_nav{
right:0;
float:right;
}
/* Scroll Div */
#ScrollDiv {
height: 410px;
overflow: auto;
}
/* this is the overall style of the content pane */
/* Content pane */
#content {
font-size:14px;
background-color:#A2C4EA;
overflow:auto;
}
#content h2{
font-weight: lighter;
font-variant: normal;
font-size: 20px;
background-color:#333366;
color:#fff;
margin:0;
padding:3px;
padding-left:20px;
}
#content h3{
font-weight: lighter;
font-variant: normal;
font-size: 14px;
background-color:#333366;
color:#fff;
margin:0;
}
#content a{
text-decoration:none;
}
#content a:visited{
text-decoration:none;
}
/* Contact us Page */
#contact-us{
background-color:#DDDDFF;
}
/* this holds anyhting that is regarded as "call next" */
#content-container{
width:100%;
}
/* */
/* Index Page */
/* This is the table that holds the headings */
#headerWrapper{
}
.indexTableHeader {
background-color:#566d96;
display: table;
width:100%;
}
/* This is the cell that holds the Headers for the Index Page */
.
/* This is the table that holds the content #566d96 #DDDDFF*/
.indexTable {
width:100%;
background-color:#566d96;
display: table;
font-size:14px
}
#sub-menu2 {
font-size: 12px;
float:left;
width:170px;
border-right:2px none #000;
border-bottom:2px none #000;
padding-left:10px;
padding-bottom:20px;
display:block;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
color: #FFFFFF;
background-color:#566d96;
border-top-style: solid;
border-left-style: none;
border-top-width: 1px;
border-top-color: #FFFFFF;
}
#sub-menu2 h2 {
font-weight: lighter;
font-variant: normal;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-top-color: #99cc00;
border-right-color: #99cc00;
border-bottom-color: #99cc00;
border-left-color: #99cc00;
font-size: 20px;
background-color:#566d96;
}
#sub-menu2 a:link {
font-size: 12px;
text-decoration: none;
color: #CCCCCC;
}
#sub-menu2 a:visited {
color: #CCCCCC;
font-size: 12px;
}
#sub-menu2 a:hover {
font-size: 12px;
color: #FFFFFF;
}
.indented{
margin:0 0 0 -1.5em;
}
/*----LEGACY CSS */
pre {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title>
rere</title>
<style type="text/css">
.accessibility
{
display: none;
}
</style>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
</head>
<body>
<div id="wrapper">
<form id="holform" name="holform" action="HeinOnlineForm">
<div id="head">
<a href="#skipto" title="Skip repetitive navigation links" accesskey="2"><span class="accessibility">Skip repetitive navigation links</span></a>
<div id="logo">
</div>
<div id="cit_nav">
<table border="0" cellpadding="0" cellspacing="0"
>
<tr><td valign="top">
Select RERE <br/>
<select name="collection"
onchange="collectionselecter(this.options[this.selectedIndex].value);"
style="font-size:9pt;width:225;font-weight:bold;color:#006633">
<option value="journals"
>
DDDDDD/option>
</select>
</td>
<td valign="top">
</td>
</tr>
</table>
</div>
</div>
<div id="container">
<div id="submenu">
<ul>
<li>
<a href="/front/x"
class="nav"
title="Home">
Home
</a>
</li>
<li><a href="Search?collect"
class="nav"
title="Display search options for this collection">
Search
</a></li>
<li> <a href="SearchH"
class="nav"
title="Review Previous Searches">
Search History
</a></li>
<li>
<a href="Help?collectio"
class="nav"
title="Display Help for this collection">
Help
</a></li>
<li><a href="ContactInfo"
class="nav"
title="Use e-mail to send comments to HeinOnline Technical Support">
Contact Us
</a></li>
<li>
<a href="#" onclick="toggleDiv()"
class="nav"
title="Printer Friendly Version">
Printer Friendly
</a>
</li>
</ul>
</div>
<a name="skipto"></a>
<div id="content">
<div id="guide">
<ul>
<li>
<a href="">trtrtrtrtrt >> </a>
</li>
<li><a href="#">wewewewewe >> </a> </li>
<li> <a href="#"> - wewewewewew
>> </a> </li>
</ul>
</div>
<div id="sub-menu2">
<h2>Navigation</h2>
<ul class="sub-list">
<li class="sub-list-element">Quick Locator</a></li>
<li class="sub-list-element">Simple Search</a></li>
<li class="sub-list-element">Advanced Search</a></li>
<li class="sub-list-element">
</ul>
<div align="center"><img src="../../images/narablue.gif" width="120" height="122" >
</div>
</div>
<div id="content-container">
<h2 >Titles
</h2>
<div id="headerWrapper">
<table class="indexTableHeader" >
<tr >
<td width="50%" align="center" border="0" >
<h3>Number </h3>
</td>
<td width="50%" align="center" border="0" >
<h3>Name </h3>
</td>
</tr>
</table>
</div>
<div id="ScrollDiv">
<table width="100%" class="indexTable" cellspacing="1" cellpadding="2">
<tr >
<td width="50%" align="center" style="height:0px;">
</td>
<td width="50%" align="center" style="height:0px;">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</form>
<div id="foot">
</div>
</div>
</body>
</html>
Hi all, I made a recent post having trouble with a three column layout. Its not really had much attention however it wasn't really clear what i was asking. I wanted the two outside columns which only contained background images to be hiden in the background from the viewpoint. You can see my original post here, it includes two diagrams: http://forums.devshed.com/css-help-...ion-584924.html Now I have edited the layout to a single column and used the images on the sides as borders. I am still having the same problem so I am now wandering if I can force the browser to centre on the main column... This would leave overhang on ether side but its only images to make the site look better. Currently the site will look good using a wide resolution but on standard 1024x768 i want the centre of the column to be in the middle of the browser window on load. Can I do it with css? javascript or ajax? If in javascript or ajax could you please like me a tutorial or something as i have no ability in those categories! Any help is great. Cheers. Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! So I have tested in all versions of IE and IE 7 seems to be the only one that gives me a problem. I have tried so many hacks. And now I am at a loss of ideas,time and mind. the site is woodbuiltright com / index-alpha1 php It seems the "E-Page" Div does not expand to contain everything. I have tried clearing divs but I must be missing something. Thanks Need to know how the pull down menu and a browse button could take a style like http://www.discovertravel.no/ i tried to make it but it did not work on firefox... so can anyone help me to make this style coz it appears well in firefox. I am going nuts trying to figure out what's causing my problem... <edit>Links Removed by User</edit> I don't even know how to explain it, other than it works fine in FF. Basically, when the text-area cols are set too large (>40), then the right cells all collapse to the left instead of obeying the specified width of the left cells... It has nothing to do with the colspan, I tried removing it and just having the textarea in the right cell, but it still causes the "squishing" Anyone have an idea? Thanks in advance. I am sorry, I can't show the page as an example as it is a clients website. Basically the problem is the box model (I think). In IE the background file loads fine, but in FF it doesn't. It is a box inside a box, inside a box. I have tried body #divname html # divname html > divname and all other selector variants I can think of to no avail. I was wondering if this is a known problem. I thought it might be z-indexing but div's inside the affected div are picking up their background images. I've spent a good amount of time searching this site for an answer. Although I found some good information, I am still hitting this brick wall. My DIV tag works in IE but not FF. Below are three links. The top two are to my site and the one below is to another site doing the same thing I'm doing but working fine in both browsers. I can't explain it any better. http:www.humito.com/contact.html (set up for IE) http:www.humito.com/contact2.html (set up for FF) http://plazamexico.com/menu/abouttheplaza.html (just like first link) can someone share some insight. In IE6 my page is not lining up like it is supposed to. The left navigation is not sitting flush against the footer or main content DIV. I have tried a clearing DIV after the main content, but still can't get it to stay flush against the footer. It looks fine in IE7, FireFox, and Safari. Can anyone help me with this?? I would appreciate it! Here is my CSS code Code: body {
background-image: url(../images/bgs/bg_try_02.jpg);
background-repeat: repeat;
margin-top: 0px;
margin-bottom: 0px;
}
.container {
background: transparent;
width: 1000px;
padding-top: 0px;
margin: 0px auto;
}
.banner {
background: url(../images/banner.jpg);
height: 245px;
width: 1000px;
margin: 2px auto 4px;
padding-bottom: 0px;
padding-top: 0px;
}
.left_col {
background: url(../images/bgs/left_col_bg_03.jpg) repeat-y;
float: left;
height: 623px;
width: 200px;
margin: 1px auto 0px;
padding: 1px 0px 0px;
}
.pipe {
background: url(../images/bgs/images/pipe_bg_03.jpg) repeat-y center;
text-align: center;
height: 622px;
width: 200px;
margin: 0px auto;
padding-bottom: 2px;
}
.right_col {
background: #FFFFFF;
float: right;
width: 786px;
height: 620px;
padding: 1px 9px 2px 5px;
margin: 1px 0px 0px;
}
.footer {
background: url(../images/bgs/footer_02.jpg) repeat-x;
padding-bottom: 15px;
margin: 0px auto;
padding-top: 5px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
height: 75px;
clear: both;
}
.border_2 {
background: url(../images/bgs/border2.gif) repeat-x;
height: 14px;
}
.clearfix {
clear: both;
visibility: hidden;
font-size: 1px;
line-height: 0px;
height: 0px;
}
.border_1 {
background: url(../images/bgs/border1.gif) repeat-x;
height: 14px;
}
.bg_color {
background: url(../images/bg_color_02.jpg) repeat-x;
height: 768px;
}
.bus_border {
background: url(../images/bgs/border2.gif) repeat-x;
height: 14px;
width: 140px;
}
.floatright {
float: right;
margin: 4px;
clear: right;
}
.btn1 {
background: url(../images/btns/left_bg_nav.jpg);
height: 65px;
width: 200px;
}
.btn2 {
background: url(../images/btns/left_bg_nav.jpg);
height: 65px;
width: 200px;
}
.btn3 {
background: url(../images/btns/left_bg_nav.jpg);
height: 65px;
width: 200px;
}
Hi there, Does anyone know what this code messed up in IE6, its fine in IE7 and firefox? I'v attached the html, css and a screengrab. Thank Code: <div class="commentAvatar"><img src="/images/avatars/noavatar.gif" alt="USER" border="0" height="50" width="50"></div>
<div class="commentMessage">
<div style="float: right; width: 32px; text-align: center;"><div class="voteBad" id="3:-:15"></div><div class="voteGood" id="3:+:15"></div></div>
<em class="comment-info"><span>4 votes</span>
<strong>guest23</strong> said <strong>(3 days, 10 hours ago)</strong></em>
my message<br>
is here</div>
Code: /* CSS*/
.commentAvatar {
width:70px;
height:64px;
float:left;
margin-left:114px;
background-image:url(images/comment_left.gif);
background-position:right;
background-repeat:no-repeat;
}
.commentMessage {
width:391px;
min-height:50px;
margin-left:184px;
padding: 5px 10px;
background-color:#555555;
background-image:url(images/comment_bg.jpg);
background-repeat:no-repeat;
}
I have a big problem with css in both IE and FF I don't know what's going on i'm making a navigation menu with submenu from some elements when i display the submenu from the element the square bullets isn't displayed beside the list item from the submenu and it's required in firefox and even the hover effect isn't displayed correct in FF also and it's displayed in IE correctly and in some page the conetnt was wholy distroyed in IE and display correct in FF with it's bugs and in dream weaver the design is going ok and i'm using a strict DTD i don't know what's wrong and what's going on ??? Hello all, Apologies to be asking for help on my first post, but I've scoured the internet looking for what is probably a quick fix but without the terminology I'm losing hours - time to ask for help! my site is englas.pl and in forefox it's fine. In ie8 it seems to be fine as well, the problem is with ie 6&7. The CSS validates according to the w3c site. (Sorry, can't add urls as i'm a new user) ie6&7 'cuts' off the bottom section of text where the container meets menu-bottom-bkg. At least this is what is visibly the case when you look at the webpage. The custom div look like this: #container { background: #FFF url(../images/bkg_container.png) repeat-y; min-height: 100%; width: 1190px; margin: 0 auto; padding: 0 14px 0 14px; } #header { background: url(../images/bkg_header.png); height: 127px; width: 1160px; margin: 0; padding: 15px 0 0 30px; } #menu-top-bkg { background: url(../images/bkg_menu_top.png) no-repeat left top; height: 128px; width: 1190px; margin: 0 0 -128px 0; } #wrapper { overflow: auto; background: url(../images/bkg_menu.png) repeat-y left; min-height: 500px; width: 1190px; margin: 0; padding: 0; } #menu { float: left; background: none; min-height: 370px; width: 159px; margin: 0; padding: 110px 0 0 0; } #content { float: right; background: url(../images/bkg_content.png) no-repeat right top; min-height: 400px; width: 763px; margin: 0 0 0 25px; padding: 15px 243px 10px 0; } #menu-bottom-bkg { background: url(../images/bkg_menu_bottom.png) no-repeat; height: 141px; width: 1190px; margin: -111px 0 0 0; } #footer { background: url(../images/bkg_footer.png); height: 100px; width: 1190px; margin: 0; padding: 16px 0 0 0; } I've gone through the html and i can't find any evidence of it being this, so i'm hoping that the css work above doesn't comply with something in the ie6&7 coding spec. I've read the guidelines to posting, so I've edited the post as much as possible to be helper friendly! Many thanks to all, doodlebug I am currently trying to build a website for a church, and have run into a little css coding problem: It seems as if the browser is not interpreting how I see the CSS code to lay out on the page (common mistake I'm sure). I know a lot of the problems I am having comes from the height of my id's. If you take a look at "sci.tamucc.edu/~ksnapka/Website/Home/index.php" , the blue-bordered box is my "bodyWrap" css id. I am wanting this to expand to 100% of its contents inside the div container. If you look under some of the pages under "Our Faith in Action", I believe these work fine because I am using text inside of the bodyWrap container instead of other div containers nested in bodyWrap. The display on the home page actually looks better on IE, so I'm also not sure why firefox sets the height of that contained to 0 (I assume for some reason it sees that the container is empty since it just has other divs located inside of it?) The CSS code is on "sci.tamucc.edu/~ksnapka/Website/CSS/csTemplates.css" Any help is greatly appreciated Thank you in advance. Hello everyone, for our intranet I have developed new application tools with tabs to change icons. it is working fine on IE7+ but having problem with IE6. there are two divs in this applications and on IE 7+ both divs starts in new line. for some reasons in IE6 it comes in one line. what cna I put in the second div that will make it appear on new line. I have tried putting <p> tag but doesn't make any different. Any suggestions. thank you. <div id="mytabsmenu" class="tabsmenuclass"> <span style="cursorointer"> <ul> <li><a rel="gotsubmenu[selected]">Trust Applications</a></li> <li><a rel="gotsubmenu">General Applications</a></li> </ul> </span> </div> <div id="mysubmenuarea" title="Applications Toolbar" align="center" style=" background-image:url(/templates/default/IconImages/iconBkgrd.jpg); background-position:top; background-repeat:no-repeat; margin:2px; padding-top:12px; padding-left:30px; vertical-align:bottom; height:50px;"> <!--1st link within submenu container should point to the external submenu contents file--> <a href="/templates/default/js/submenucontents.htm" style="visibility:hidden">Sub Menu contents</a> </div> |
|||||||