|
CSS - 2 Css Bugs In A Div Overlay Design On ... Myspace
Hopefully I'm just not stumbling on the right CSS to fix the bugs. I understand that these same bugs might be attributed to the myspade code or myspace rules limiting html/css.
Here's the mock-up: www.myspace.com/brovizion 2 bugs (1 in firefox, 1 in ie (6.0)): 1. (firefox only) There are 2 nav bars in the "innerwrapper" div (both black), one at the top, and one at the bottom. On the lower nav bar, my background image that is supposed to tile vertically throughout the whole "innerwrapper" div disapppears. 2. (ie only) The upper and lower nav bars (whose links are set to display: block) are on each of their own lines, yet still floated horizontally. This one is hard to explain except to say the nav bars should work like they do in firefox, but in ie they are on their own program. Viewing the site in both browsers will clearly demonstrate the problem. (ie 6.0, haven't tested in 7.0 yet.) I understand that the nature of this project (a design that must reside in a div overlay on a myspace page) makes for a million different possibilities for why it's messed up, but maybe if someone can help me brainstorm some potential fixes, I'll stumble onto something that works. I'll post my code as well. CSS: Code: <style type="text/css">
.btext {display:none;}
.contacttable {display:none;}
.lightbluetext8 {display:none;}
.nametext {display:none;}
.orangetext15 {display:none;}
.redlink {display:none;}
.whitetext12 {display:none;}
.hidethem {visibility:hidden; display:none;}
.comments {visibility:hidden; display:none;}
body {
background-color: 003366;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
table {
background-color: 003366;
}
p {
font-size: 12px;
}
h1 {
font-size: 24px;
font-weight: bold;
}
h2 {
font-size: 18px;
}
h3 {
font-size: 16px;
font-weight: bold;
}
ul {
list-style-type: none;
}
ul li {
}
a {
color: 003366;
text-decoration: none;
font-size: 12px;
font-weight: bold;
}
a:hover {
color: 003366;
text-decoration: underline;
}
a:visited {
color: 003366;
text-decoration: none;
}
a:visited:hover {
color: 003366;
text-decoration: underline;
}
h1 a {
color: 003366;
text-decoration: none;
font-size: 24px;
font-weight: bold;
}
h1 a:hover {
color: 003366;
text-decoration: underline;
}
h1 a:visited {
color: 003366;
text-decoration: none;
}
h1 a:visited:hover {
color: 003366;
text-decoration: underline;
}
.wrapper {
position: absolute;
top: 132px;
left:50%;
margin-left:-460px;
width: 870px;
height: 800px;
z-index: 1;
text-align: center;
}
.masthead {
width: 870px;
background-image: url(http://www.ourcampusbookstore.com/myspace/images/mastheadbg.jpg);
background-repeat: no-repeat;
height: 195px;
}
.innerwrapper {
width:870px;
padding-left: 92px;
padding-right: 22px;
background-image: url(http://www.ourcampusbookstore.com/myspace/images/bodybg.jpg);
background-repeat: repeat-y;
text-align: left;
}
.uppernav {
width: 756px;
margin: 0;
padding: 0;
background-color: 000000;
font-weight: bold;
display: inline;
}
.leftcol {
clear: both;
width: 500px;
float: left;
vertical-align: top;
padding: 10px;
}
.rightcol {
width: 220px;
float: left;
vertical-align: top;
padding: 10px;
text-align: center;
}
.rightcol h3 {
text-align: center;
}
.lowernav {
width: 756px;
margin: 0;
padding: 0;
background-color: 000000;
font-weight: bold;
clear: both;
}
.footer {
width: 870px;
background-image: url(http://www.ourcampusbookstore.com/myspace/images/footerbg.jpg);
background-position: bottom;
background-repeat:no-repeat;
height: 30px;
clear: both;
}
.uppernav ul {
width: 756px;
list-style: none;
background-color: 000000;
margin: 0;
padding: 0;
float: left;
border-bottom: 2px solid black;
}
.uppernav ul a {
width: 151px;
display: block;
float: left;
margin: 0;
text-decoration: none;
line-height: 20px;
text-align: center;
color: ffffff;
font-weight: bold;
}
.lowernav ul {
width: 756px;
list-style: none;
background-color: 000000;
margin: 0;
padding: 0;
float: left;
border-bottom: 2px solid black;
border-top: 2px solid black;
}
.lowernav ul a {
width: 151px;
display: block;
float: left;
margin: 0;
text-decoration: none;
line-height: 20px;
text-align: center;
color: ffffff;
font-weight: bold;
}
.schoollist {
text-align: center;
}
.schoollist li {
line-height: 16px;
padding: 1px 1px;
width: 150px;
margin: 0 auto;
}
.uppernav ul a:hover, .uppernav ul a:visited:hover {
background-color: ffcc66;
color: 003366;
}
.lowernav ul a:hover, .lowernav ul a:visited:hover {
background-color: ffcc66;
color: 003366;
}
.schoollist a, .schoollist a:visited {
color: 000000;
background-color: EEEEEE;
width: 150px;
line-height: 18px;
font-size: 14px;
font-weight: bold;
display: block;
padding: 1px;
}
.schoollist a:hover, .schoollist a:visited:hover {
color: FFFFFF;
width: 150px;
text-decoration: none;
background-color: 00FF33;
}
.c0000FF a, .c0000FF a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c0000FF a:hover, .c0000FF a:visited:hover {
color: FF6600;
width: 150px;
text-decoration: none;
background-color: 0000FF;
}
.c990000 a, .c990000 a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c990000 a:hover, .c990000 a:visited:hover {
color: FFCC00;
width: 150px;
text-decoration: none;
background-color: 990000;
}
.cCC6600 a, .cCC6600 a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.cCC6600 a:hover, .cCC6600 a:visited:hover {
color: FFFFFF;
width: 150px;
text-decoration: none;
background-color: CC6600;
}
.c3366CC a, .c3366CC a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c3366CC a:hover, .c3366CC a:visited:hover {
color: FFCC33;
width: 150px;
text-decoration: none;
background-color: 3366CC;
}
.c993333 a, .c993333 a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c993333 a:hover, .c993333 a:visited:hover {
color: 999999;
width: 150px;
text-decoration: none;
background-color: 993333;
}
</style>
XHTML: Code: <div class="wrapper"> <div class="masthead"></div> <div class="innerwrapper"> <div class="uppernav"> <ul> <li><a href="#">View our Pics</a></li> <li><a href="#">Watch our Video</a></li> <li><a href="#">View Blog</a></li> <li><a href="#">Send Message</a></li> <li><a href="#">Add 2 Friends</a></li> </ul> </div> <div class="leftcol"> <h1><a href="http://www.ourcampusbookstore.com">OurCampusBookstore.com</a></h1> <h2>About us:</h2> <p><strong>OurCampusBookstore.com</strong> is an online classifieds website customized just for university students. It is formatted to allow students to post anything from textbooks and furniture, to electronics, event announcements and roommates.</p> <h3>What can it be used for?</h3> <ul> <li><strong>1. Post events</strong> - Is your band having a concert? Throwing a huge party? Have a club event to announce? Use the site!</li> <li><strong>2. Furniture</strong> - Are you moving out and need to get rid of furniture? Are you moving into an apartment and need to find furniture? Post what you have or need now and make arrangements to buy/sell your furniture in the future.</li> <li><strong>3. Textbooks</strong>- Buy and sell your used textbooks. Avoid the middleman and the high cost of books. Trade amongst yourselves.</li> <li><strong>4. Jobs</strong> - We have several companies signed up to post available jobs in Pullman, as well as summer internships and post-graduate opportunities all over Washington.</li> <li><strong>5. Apartments</strong> - Need to sublease? Moving to a new apartment? Find information on what's available at ourcampusbookstore.com.</li> <li><strong>6. Electronics, Clothes, etc.</strong> - Sell your used video games, consoles, computers, monitors, TVs, movies, software, and so on.</li> </ul> <h2>Who we'd like to meet:</h2> <p>As many students as possible who have books, furniture and electronics to sell, or students looking for books, furniture, apartments, jobs and events to attend!</p> </div> <div class="rightcol"> <h3>Current Schools</h3> <ul class="schoollist"> <li class="c0000FF"><a href="http://florida.ourcampusbookstore.com">Florida</a></li> <li class="c990000"><a href="http://minnesota.ourcampusbookstore.com">Minnesota</a></li> <li class="cCC6600"><a href="http://texas.ourcampusbookstore.com">Texas</a></li> <li class="c3366CC"><a href="http://ucla.ourcampusbookstore.com">UCLA</a></li> <li class="c993333"><a href="http://washingtonstate.ourcampusbookstore.com">Washington State</a></li> </ul> </div> <div class="lowernav"> <ul> <li><a href="#">Add 2 Group</a></li> <li><a href="#">Forward 2 Friend</a></li> <li><a href="#">Add 2 Favorites</a></li> <li><a href="#">Block Me</a></li> <li><a href="#">Rank Me</a></li> </ul> </div> </div> <div class="footer"></div> </div> Similar Tutorialslook at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated. I am having a lot of trouble trying to get my new design to work correctly in Internet Explorer 6, which sadly around 15% of my visitors still use It has been breaking the top navigation bar and instead of having the tabs appear horiziontally it has had them vertically, messing up the header. It also seems to be breaking the content sections, so that the right content section appears below the left sideblock. Then there is an annoying bug with a small div I use to separate the menu list on the sideblock. I really wish I didn't have to support IE6, but so many visitors use it I really can't not. I'm not the best at CSS, but I don't think my code is that buggy as it works correctly in the latest versions of Opera, Firefox & Safari, as well as IE7 & IE8. The site is he http://beta.the-big-bang-theory.com. Many thanks for any assistance. http:// bluedesign.shaheenwebdesign. com/ Username: access Password: 123456 The slideshow and the welcome letter are next to each other (slideshow on right, letter on left) in Firefox as they should be, but when viewed in IE, the slideshow takes over and the letter is pushed down the page to below the slideshow. Also, my navigation menu links appear higher on the page in IE. I can't figure it out, help please! Code:
<div id="mainContent">
<br />
<div id="wrapper2">
<div style="position: relative; float: right;">
<jdoc:include type="modules" name="left" />
</div>
<div id="WelcomeLetter">
<h1> Force Training And Equipment</h1>
<p>If you're looking for a wide selection of Guns, Scopes and other Accessories then you've come to Force Training and Equipment. Serving Central PA and beyond since 1989, Kirk knows how to treat you, the customer, and is here to answer any question you may have about weapons. Please look at our Specials and Inventory to see what we have to offer!
</p>
</div>
</div>
Code:
.oneColElsCtrHdr #mainContent {
padding: 0 20px;
background: #ffffee;
}
#wrapper2 {
width: 980px;
margin: 0 auto;
}
#WelcomeLetter {
position: relative;
border: 1px solid #1d4873;
width: 350px;
font-family: Arial;
color: #000000;
line-height: 2em;
margin-top: 3px;
padding: 0px 10px 0px 10px;
}
I am redesigning my website at this location: http://www.brovizion.com/newsite. I have 3 little bugs that are driving me crazy: 1. (http://www.brovizion.com/newsite)(all pages) #mainNav won't put the background color all the way across the div on FF or Netscape. IE does take the dark blue background color all the way accross the page, but I don't know why the other two wont. I like the looks of it both ways, but still want to know why it is behaving weird. 2. (http://www.brovizion.com/newsite/portfolio.html) (IE only) For some reason the table in the middle of the page is pushing the left-most column out its position. This is not happening in FF or Netscape. Am I missing something simple? 3. (http://www.brovizion.com/newsite/contact.html) (IE only) The background color I've set for the fieldset tag is continuing upward approx 1 em. It is not happening in the other 2 browsers? Anyone know a simple hack to fix this? While we're at it, I know this isn't CSS related, but regarding (http://www.brovizion.com/newsite/contact.html), how come FF is making the input fields for "name" and "email" that light yellow color? Is there a way to get rid of it? Thanks in advance to anyone who has any ideas on how to fix these items? Hi, Does anyone have any Ideas how to fix the two rendering bugs shown in the screenshots below? In IE5.5 The two top bars that stretch across the screen stretch too far distorting the page slightly. (Circled in red). http://www.explosiveracing.net/test/render_bugs/ie55.jpg In NN6 the backgrounds on the table cells do not fill correctly looking unsightly. (Circled in red). If you compare this to viewing the site in FF then you can see what I mean http://www.explosiveracing.net/test/render_bugs/nn6.jpg Site: http://www.explosiveracing.net/test/ I have some layout issues.....one in FF, and one in IE.... I have a set of nested div's. One main one that applies a 2px solid black collapsable border. In side are two more divs of equal height. One floated left, and one floated right. In FF, they display perfect except that the border of the main div does not extend all the way to enclose both of the divs that it contain. In IE, the div that I have floated right appears centered beneath the first div instead of next to it. Here is the relevant XHTML 1.1 code (I've added the <base> tag so you can recreate this locally): html4strict Code: Original - html4strict 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" lang="en"> <head> <title>Welcome to Foltzconstruction.com</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en-US" /> <link rel="stylesheet" href="newstyles.css" /> <base href="http://www.foltzsconstruction.com"> <script type="text/javascript"> var revert = new Array(); var inames = new Array('about', 'gallery', 'services', 'estimates', 'test', 'contacts'); // Preload if (document.images) { var flipped = new Array(); for(i=0; i< inames.length; i++) { flipped[i] = new Image(); flipped[i].src = "images/"+inames[i]+"2.jpg"; } } function rollover(num) { if(document.images) { revert[num] = document.images[inames[num]].src; document.images[inames[num]].src = flipped[num].src; } } function rollback(num) { if(document.images) document.images[inames[num]].src = revert[num]; } </script> </head> <body> <div ID="main"> <div ID="header"> <h1><a href="index.html"><IMG SRC="images/title.jpg" WIDTH=775 HEIGHT=53 ALT="Welcome to Foltzconstruction.com" /></a></h1> <div ID="navbar"> <a href="about.html" onmouseover="rollover(0)" onmouseout="rollback(0)"><img name="about" src="images/about1.jpg" width=274 height=54 border=0 alt="about us" /></a> <a href="gallery.html" onmouseover="rollover(1)" onmouseout="rollback(1)"><img name="gallery" src="images/gallery1.jpg" width=274 height=32 border=0 alt="photo gallery" /></a> <a href="services.html" onmouseover="rollover(2)" onmouseout="rollback(2)"><img name="services" src="images/services1.jpg" width=274 height=31 border=0 alt="services" /></a> <a href="contacts.html" onmouseover="rollover(3)" onmouseout="rollback(3)"><img name="estimates" src="images/estimates1.jpg" width=274 height=31 border=0 alt="estimates" /></a> <a href="tests.html" onmouseover="rollover(4)" onmouseout="rollback(4)"><img name="test" src="images/test1.jpg" width=274 height=31 border=0 alt="customer testimonials" /></a> <a href="contacts.html" onmouseover="rollover(5)" onmouseout="rollback(5)"><img name="contacts" src="images/contacts1.jpg" width=274 height=67 border=0 alt="contacts" /></a> </div> <h2><img src="images/m3.jpg" width=501 height=179 alt="" /><a href="pom.html"><img src="images/project.jpg" width=501 height=67 border=0 alt="project of the month" /></a></h2> </div> <div ID="headline"> <img src="images/aboutbar.jpg" alt="About Us" /> </div> </div> </body> </html>
And here's my current stylesheet: css Code: Original - css Code body { padding: 10px; margin: 0; background-image: url(images/wood120.jpg); font-family: Verdana; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #525252; } #main { margin: 0 auto; width: 775px; border-width: 2px; border-spacing: 0px; border-style: solid; border-color: black; border-collapse: collapse; position: relative; top: 10px; height: *; } #header { width: 775px; margin: 0; padding: 0; font-size: 1px; height: 189px; } #navbar { width: 274px; height: 246px; float: left; } #headline { width: 775px; height: 47px; } h1 { width: 775px; margin: 0; padding: 0; height: 53px; } h2 { width: 501px; height: 246px; margin: 0; padding: 0; float: right; } a img { border: none; }
hello! You help in solving a few minor problem on my project would be greatly appreciated! site is he http://pnlab.soundwebdev.com/changetheme-xSixteen.phtml Issues: 1) right-side content box does not move flush to top ov div in non-IE browsers. 2) links in the 'clockblock' are wrong color in IE only. CSS tells them to be silverish. 3) footmenu links (footmenu directly below clockblock) are the wrong color in IE only. CSS tells them to be grayish. I have toyed with just about evrything I can think of for these three items. Any help would be greatly appreciated! Hey guys, I'm working with firefox and just checking things out in IE to make sure nothing to major pops out. One such thing did come out and I discovered that when I highlight the text of a link the :hover background appears, it normaly doesn't otherwise...although it doesn't follow all my rules here is some code. Code:
/*splash.css*/
#splash p a:hover{
background-image:url('/image/splash_hover.png');
background-repeat:no-repeat;
color:#000;
}
/*index.html head*/
<!--[if ie 6]>
<style>
* html #inner_wrap {
top:35%;
}
#splash a:hover{
background-image:url('/image/splash_hover.png');
background-repeat:no-repeat;
color:#000;
position:relative;
top:2em;/*otherwise the same, I gota push the link down farther for IE, 6 anyway*/
}
#jbc_vc{
display:none;/*because it pushes the enter link off the page*/
}
</style>
<![endif]-->
The background image is repeated even thought it's not in firefox, and I have to highlight the text for the background image to even apear. Does anyone know what error is being triggered here? Two issues I could use some help on, if anyone is willing to assist: One: I'm once again finding myself at a loss to correct an odd CSS rendering anomoly that shows up (of course) only in MSIE6 and it's Mac counterpart (but more severely in IE6/Win). Basically, I'm using the negative margins method (described here in an article we probably all know on ALA). This combines neg. margins with Dan Cedarholm's Faux Columns to create a nice two-column layout with a footer that always clears regardless of which column is longer. It could be done fluidly, but this site calls for fixed width @ 760px, so it's in a viewport div. The problem is, I'd like to extend a border {1px solid #eee} between the two columns. I assumed based on my code that I would simply apply a right hand border to the content div, and that (regardless of the non-semantic wrapper div used to keep things kosher with the faux columns) that would draw the necessary line. This seems to have worked fine (with a swap of margin for padding at the bottom of the content div, to keep the area contiguous to the footer). But in IE 6, I noticed a gap at the bottom of the page even with 0 margin. I assumed I was missing somethiing obvious like a whitespace bug for it to work in everything but IE, but alas no -- I can't find the source so I'm hoping one of you pros may do what I can not. Two: Secondly, I'm having endless problems with the "Story Options" <UL>. No matter what I try, I cannot get a consistent alignment of bullet-to-list text accross browsers. Every single one is at least one pixel different. Right now is the closest I can get things to working using background images instead of list-style-image, but frankly I'm near giving up and using a character and just scrapping the custom bullet altogether. Sadly, I may have found a solution earlier but it breaks IE5/Mac which (among other problems) doesn't seem to like background-position definitions, or at least the ones I tried. I sorta need IE5 mac support even though I would otherwise not care, because the office of the content providers for this site is entirely OS9 Mac based. Ick. If anyone knows a solution to this problem off hand though, I would seriously appreciate it before I jump off the roof Here's the code: Click here to see the template. Click here for CSS. Thanks in advance. This really should be the final nail the darn coffin for this project's CSS templates. Then I can get back to the warm snuggle of PHP -- Aiden Just so I don't feel like a moron in front of the pros: I'm totally aware I should be using an inline list with :hover for the navbar, and I'm also aware how much better my unstyled content would look if I used semantic definitions for headlines and such. The reason for the former is deadline and the fact that the current system works on every browser I've tested with - more than I can say about most of this code. The second is because <Hx> spans have an inherited top/bottom margin that extends beyond style, the only way I have found to override being negative margins. Unfortunately, IE6/Win doesn't read these right and screws the whole thing. Thus, I'm using non-semantic proprietary classes for the headlines/subheads, and perfectly OK with that for this project since it works and let's me keep the ledding nice and tight the way the client wants it. I have made a CSS dropdown menu which works O.K. on Safari and Firefox but on Explorer, I loose my dropdown menu and all I see is an orange line. Funny thing is, that it works OK on Explorer 8 on vista but not Explorer 8 on XP??? Explorer 5 and 6 is a problem and probably other Explorer versions. I can't recall whether I read somewhere that I have to put a hack line of code somewhere for it to work on Explorer??? Can someone help please? I need it to work properly on all browsers and platforms. Does my code look alright? CSS code: Code:
#menu {
text-align: left;
position:relative;
vertical-align:middle;
display:table-cell;
height: 17px;
}
.submenuHead {
font-family:Arial, Helvetica, sans-serif;
color:#A7A9AC;
font-size:11px;
font-weight:none;
}
#nav {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER: 0px, none; WIDTH: 121px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;
}
#nav UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;
}
#nav LI {
FLOAT: left; MARGIN-BOTTOM: 0px; WIDTH: 180px; LINE-HEIGHT: 17px; POSITION: relative; border:0px;
}
#nav LI UL {
MARGIN-TOP: -50px; LEFT: -999em; MARGIN-LEFT: 121px; POSITION: absolute;
}
#nav LI A {
BORDER-RIGHT: none 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: none 0px solid; DISPLAY: block; PADDING-LEFT: 0px ; FONT-WEIGHT: none; PADDING-BOTTOM: 0px; BORDER-LEFT: none 0px solid; WIDTH: 121px; COLOR: none; PADDING-TOP: 0px; BORDER-BOTTOM: none 0px solid; BACKGROUND-COLOR: none; TEXT-DECORATION: none;
}
#nav LI2 A {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 0; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 5px; FONT-WEIGHT: none; PADDING-BOTTOM: 0px; BORDER-LEFT: #ccc 1px solid; WIDTH: 150px; COLOR: #000; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #F2F2F2; TEXT-DECORATION: none;
}
#nav LI A:hover {
COLOR: #fff; BACKGROUND-COLOR: #FBB568;
}
#nav LI:hover UL {
LEFT: auto;
}
#nav LI LI:hover UL {
LEFT: auto;
}
#nav LI.sfhover UL {
LEFT: auto;
}
This goes to the HTML: Code: <div id="menu">
<UL id=nav>
<LI><a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menuBtn','','images/menu1.jpg',1)"><img src="images/menu2.jpg" name="menu" width="121" height="17" border="0" rel="balloon1"></a></span>
<UL>
<LI2><a href="http://www.sample1.com" target="_blank" class="submenuHead">Sample1</a></LI2>
<LI2><a href="http://www.sample2.com" target="_blank" class="submenuHead">Sample2</a></LI2>
<LI2><a href="http://www.sample3.com" target="_blank" class="submenuHead">Sample3</a></LI2>
</UL>
</LI>
</UL>
</div>
Yesterday I was able to get my page to validate with strict XHTML and get it looking exactly how I want it to in Firefox: http://www . restonheights . com/ However, the design falls apart a bit in IE6. Viewing in it IE6 causes the feedback div to grow causing a left-right scroll bar. Scary things also happen if you reduce the width of your browser. Again, it behaves perfectly in FF. Can anyone recommend an IE hack that would get that feedback div to behave? I wanted to validate my site and started running the validator. SO i got one doctype and placed in my page(<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">) But now, some of my css "tags" are not working. For and example: Code:
#contact {
border:1px solid #666;
background:#FDF5E6;
width:500px;
margin-left:200px;
margin-top:20px;
padding:20px;
padding-top:5px;
font-size:15;
text-align:left;
}
The border, padding, width, background work. But font-size isnt working. Any ideas? I'm making a fairly simple one-page website, but i need to display a box with some text over anything else at some points using javascript. I'm first trying to actually get a box working that will display over the rest of the page, somehow what I read on the internet doesn't work. I have the following code. Ive made a css class 'box' which should describe the position of where I want the box, now I need to figure out how to get it working and preferably how to display/hide it using javascript (at places indicated in the script): Code: <html>
<head>
<script language="javascript" type="text/javascript">
// This event is fired after all images on the page have loaded... therefore
// we know that image 1 is being displayed
window.onload = function() {
var innertext = "<p>Loading Colors...<\/p>";
//start displaying here
loadImg("ge64bw.jpg", image2Done);
//stop displaying here
}
//This function loads an image from a url then calls a method
function loadImg(url, handler) {
//Declare a new image
var img = new Image();
//Call the passed in method but change the signature as we are not interested
// in onload event args
img.onload = function() { handler(this); } ;
//Initiate the download of the image
img.src = url;
}
//Called when the second image has finished downloading
function image2Done(img) {
//Swap the images
document.getElementById("myImageTag").src = img.src;
//Go get the third
loadImg("ge64c.jpg", image3Done);
}
//Called when image 3 has finished downloding
function image3Done(img) {
//Swap the images
document.getElementById("myImageTag").src = img.src;
//FINISHED
}
</script>
<title>Ge64 Tech Repairs</title>
<style type="text/css">
.image {
display: block;
margin-left: auto;
margin-right: auto;
width: 924px
height: 668px;
margin-top: 45px;
z-index:2
}
.box {
text-align: center;
height:20px;
margin-top: 15px
}
</style>
</head>
<body>
<img src="load.gif" id="myImageTag" name="myImageTag" class="image">
</body>
</html>
Is there anyway I can do something like this using css. Follow the red arrow. Basically, I would like to put a tiny red square on the upper right hand corner of an image. Is this possible? Here is the website that i would like to implement it on. http://upit.section31.us/index.php?browse Hey All, I'm running a wordpress site, and I need to have a section of text set to overlay some other text in the post areas. I have created a section of CSS : Code: div.products {
border: 1px solid green;
left: 485px;
position: relative;
top: -433px;
width: 250px;
}
However on a long page, it shows in the wrong place and in a short place it shows in the wrong place... How do I get it to go from the very top of the visable browser area, and from the right of the browser area rather than a div area? I don't have an example as I can't get started without really knowing the possibility of doing this. But let me offer an example. A centered table 775 pixels wide with two columns 50% each. Code:
<table width="775" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="50%">Text and more text</td>
<td width="50%">and yet more text again.</td>
</tr>
</table>
What I would like to do is that table be the basis of everything... it will contain lots and lots of text. But what I'd like to do is allow an overly I guess you could call it of a table that is designed like this. Code:
<table width="775" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Sidenote Text</td>
<td width="475">(This would be empty to allow the view of the table undernearth. That has all the text.)</td>
<td width="150">Sidenote Text</td>
</tr>
</table>
The idea is to have a link to show sidenotes... that would be on both sides of the main table as an overlay. I don't even know the possibility. I know you can have absolute positioned tags with div and span... but it's unpredictable for anything really on the right side of the document depending on the user's resolution. Furthermore, I don't have the complete understand of all it's workings to get it to work the way I need. Any ideas? I suspect that the solution to this problem really involves a more thorough analysis of my code than is fair to inflict upon this audience, but just in case there's something obvious I've overlooked... I've incorporated a lightbox into a site I'm building at www.charlescarey.co.uk/works.php When clicking on thumbnails to activate the lightbox, a 'shadow overlay' is supposed to 'grey out' the rest of the page, but it doesn't work; it only greys out a small area to the left. What am I doing wrong? Any help appreciated. Thank you for stopping by! I'd like some guidance about a problem that has to do with CSS (and a bit of JavaScript I guess) and trying to position an overlaying DIV. The problem description is quite simple; When I click an image on the "main" area, a div gets, with a little help from javascripting, its display property set to "block". This surely and safely makes the div's content appear as it should and all is fine. I now have a headache from trying to figure out how I could position this div. I know what I'd like to do but I can't quite figure out how to get it right. I'd like to have the popup-div center itself on the page, regardless of the size of contents inside it. The content mostly consists of text of varied amounts and next to no images or other media content. If you got any ideas about this or got a link to a website that's similar to what I'm trying to accomplish or any input at all, feel free to make a comment! It's much appreciated! Here's what the popup CSS looks like atm: Code: div.PopUp {
width: 550px;
border: dashed silver 1px;
display: none;
position: absolute;
left: 150px;
top: 50px;
background-color: black;
text-align: justify;
font-size: 10pt;
color: black;
}
Regards DrLaban Not sure about this one- maybe someone can help shed some light on it? I have a <div> that contains a form. This div is dynamically-sized and floated left. What I want to do is place a nested <div> inside it so that it will cover the form below it. What's happening is that if I add the nested <div>, it pushes the form in it's container <div> down, which is obviously not what I want. I have tried using z-index on this nested <div> but with no success. Here is the code I'm using: Code:
<div id="formdiv" style="display:block; padding-right:15px; padding-top:10px; border-right:#A0A0A0 1px dotted; float:left; width:auto; height:100%;">
<div id="overlaydiv" style="top:0px; left:0px; width:100%; height:100%; background-color:#FF0000; z-index:500;"></div>
<form>
...
</form>
</div>
There is other <div> tags before and after the 'formdiv', which are part of the page layout, but do not need to be covered by the 'overlaydiv'. I should note that 'formdiv' is itself inside a container <div>. I have tried various combination of CSS settings, but they don't give the same result. position:absolute; covers EVERYTHING within the uppermost container <div>, obviously not what I want. I've tried putting the form into it's own <div>, but I get the same result- the form just gets pushed below the 'overlaydiv'. Anyone have any ideas? Thanks, - skubik Hi I have a image gallery and I would like delete buttons or red little x's ontop of each image. I dont want to make the image background DIV I want to keep it <img src="image.jpg"> Is it possible to do this? Louis |
|||||||