|
HTML - Block Over Footer? And Random Black Bars
Both Google Chrome 12.0.742.91 and Safari 5.0.5 (Both on Mac) seem to be giving me problems. Google Chrome is causing the most headache. When I go to my website at www.schenkhampton.com/airtex2 It looks fine at first look. However, if you click refresh you will see like what I have in photo one where it looks like a block is covering part of the logos on the bottom. But, if you click one of the dropdowns or resize the browser window it corrects itself. Both Safari and Google are having that problem. Safari is doing two different versions of blocking the footer logos as you can see in the photos below. Then in Google when you open up all of the dropdowns you will scroll down and notice black bars appear. However, again if you resize your browser window or scroll far enough away from the black bar and come back it is gone. So, part of me says it is not code...cause code would stay. I recently changed the css sheet and validated everything. Everything clears fine. I even went back and put in the original style sheet cause I dont remember ever seeing that before and I still had the same issue. I even tried to do it with a version that I saved back on May 24 of both the page and css when I first started building this site. Same issue. I am not seeing any of these issues in firefox.
I am at a loss cause it doesnt even make sense to me what could be causing these issues so any help would be appreciated. Matt Similar TutorialsHow can I fixed the size of the page to desired width and length and also make that page fixed to that size so that it cannot resized. And also I want to disable all bars(scrollbars, menubars, address bars etc) for the page. I am using these codes for my projects and these are for commercial purpose. I am also asking for your permission to use these codes for my projects. lookin 4wrd. Alright, so on my webpage I want a black background and then have the iframes white. So, its white on black and the iframes are displayed over the black background. This is how I want it to look and this is how it looks in Internet Explorer: http://i249.photobucket.com/albums/g...undiframes.jpg This is how it looks in Mozilla and I want it to look like the one up above: http://i249.photobucket.com/albums/g...undiframes.jpg Can someone tell me how I fix this? I am trying to remove the black borders or lines around my friends website and cant seem to do it? any ideas http://www.lavonnebeauty.com/ I assume that this should not be in the Flash section as it seems as the threads there are discussing problems within the Flash program, not putting Flash videos on your webpage. Anyway, I put my flash video on my website and it has black borders on the left and right sides of the video. I would like to remove them, but I don't know a whole lot about flash video parameters. Could anyone tell me how to do this? Here's my code for the index page: 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>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="AV Avenue is a K-12 Classroom Technology Specialists company. We provide audio/video equipment sales, systems installations and service of existing systems."/>
<meta name="keywords" content="av avenue, audio, video, audio visual, classroom, education, installation, smartboard, k-12"/>
<title>AV Avenue</title>
</head>
<body>
<ul id="stoplight">
<li id="stoplight1"><a href="index.html"></a></li>
<li id="stoplight2"><a href="aboutus.html"></a></li>
<li id="stoplight3"><a href="contactus.html"></a></li>
</ul>
<div id="stoplightbottom">
<img src="Images/Home Page/StoplightBottom.png" alt=""/>
</div>
<div id="smartboard">
<img src="Images/Home Page/Smartboard.png" width="180" height="180" alt=""/>
</div>
<div id="featuredpartner1">
<img src="Images/Home Page/AviSPLLogo.png" width="140" height="60" alt=""/>
</div>
<div id="featuredpartner2">
<img src="Images/Home Page/UnitedVisualLogo.png" width="140" height="60" alt=""/>
</div>
<div id="featuredpartnertext">
<span class="blackfont2 comicsansms">SMART Board Partners</span>
</div>
<div id="specials">
<img src="Images/Home Page/MaySpecials.png" alt="Check out our special services for May!"/>
</div>
<div id="text2">
<img src="Images/Home Page/Text2.png" alt=""/>
</div>
<div id="avsign">
<img src="Images/Home Page/AVAvenueLeftSign.png" alt=""/>
</div>
<div id="states">
<img src="Images/Home Page/States.png" alt=""/>
</div>
<div id="contractorstext">
<span class="blackfont1 comicsansms">Technology Systems Contractors Power Limited Technicians</span>
</div>
<div id="company1">
<img src="Images/Home Page/Company1.png" height="30" width="100" alt=""/>
</div>
<div id="company2">
<img src="Images/Home Page/Company2.png" height="30" width="100" alt=""/>
</div>
<div id="company3">
<img src="Images/Home Page/Company3.png" height="30" width="100" alt=""/>
</div>
<div id="company4">
<img src="Images/Home Page/Company4.png" height="30" width="100" alt=""/>
</div>
<div id="company5">
<img src="Images/Home Page/Company5.png" height="30" width="100" alt=""/>
</div>
<div id="flashmovie">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="300" height="400" id="AV_Ave" align="middle">
<param name="movie" value="AV_Ave.swf"/>
<param name="quality" value="high"/>
<param name="play" value="true"/>
<param name="bgcolor" value="#000000"/>
<param name="loop" value="true"/>
<param name="wmode" value="window"/>
<param name="scale" value="showall"/>
<param name="menu" value="true"/>
<param name="devicefont" value="false"/>
<param name="salign" value=""/>
<param name="allowScriptAccess" value="sameDomain"/>
<object type="application/x-shockwave-flash" data="AV_Ave.swf" width="600" height="400">
<param name="movie" value="AV_Ave.swf"/>
<param name="quality" value="high"/>
<param name="play" value="true"/>
<param name="bgcolor" value="#000000"/>
<param name="loop" value="true"/>
<param name="wmode" value="window"/>
<param name="scale" value="showall"/>
<param name="menu" value="true"/>
<param name="devicefont" value="false"/>
<param name="salign" value=""/>
<param name="allowScriptAccess" value="sameDomain"/>
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
</a>
</object>
</object>
</div>
</body>
</html>
and here's my CSS: Code: * {margin:0; padding:0;}
html, body, div, span,object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { overflow:auto; }
ul#stoplight {
margin: 0px 840px;
width: 0px;
height: 0px;
list-style: none;
}
ul#stoplight li {
display:inline;
}
ul#stoplight li a {
float:left;
text-indent:-9999px;
text-decoration:none;
}
ul#stoplight li#stoplight1 a {
width:178px;
height:82px;
background:url(Images/Stoplights.png) no-repeat 0 0;
}
ul#stoplight li#stoplight1 a:hover {
background-position: -221px 0;
}
ul#stoplight li#stoplight2 a {
width:178px;
height:63px;
background:url(Images/Stoplights.png) no-repeat 0 -82px;
}
ul#stoplight li#stoplight2 a:hover {
background-position: -221px -83px;
}
ul#stoplight li#stoplight3 a {
width:179px;
height:66px;
background:url(Images/Stoplights.png) no-repeat 0 -145px;
}
ul#stoplight li#stoplight3 a:hover {
background-position: -221px -144px;
}
body {
background-image: url('Images/GradientBackground.png');
background-repeat: repeat-x;
}
.arial {font-family: Arial;}
.tahoma {font-family: Tahoma;}
.verdana {font-family: Verdana;}
.comicsansms {font-family: Comic Sans MS;}
.underline {text-decoration: underline}
.blackfont1 {font-size: 16px;}
.blackfont2 {font-size: 24px;}
.whitetext1 {color: #F2F2F2; font-size: 30px;}
.whitetext2 {color: #EBEBEB; font-size: 17px;}
.whitetext3 {color: #DBDBDB; font-size: 18px;}
#background {top: 2.7em; left: 4em; position:absolute; z-index: -2; visibility: visible;}
#stoplightbottom {margin: 211px 840px; position: absolute; z-index: 1; visibility: visible;}
#featuredpartnertext {margin: 230px 980px; position: absolute; z-index: 1; visibility: visible; width: 300px;}
#smartboard {margin: 270px 1020px; position: absolute; z-index: 1; visibility: visible;}
#featuredpartner1 {margin: 460px 960px; position: absolute; z-index: 1; visibility: visible;}
#featuredpartner2 {margin: 460px 1110px; position: absolute; z-index: 1; visibility: visible;}
#specials {margin: 550px 1020px; position: absolute; z-index: 1; visibility: visible;}
#text2 {margin: 650px 155px; position: absolute; z-index: 3; visibility: visible;}
#avsign {margin: -5px 50px; position: absolute; z-index: 1; visibility: visible;}
#states {margin: 90px 540px; position: absolute; z-index: 1; visibility: visible;}
#contractorstext {margin: 30px 530px; position: absolute; z-index: 1; visibility: visible; width: 250px;}
#company1 {margin: 210px 250px; position: absolute; z-index: 1; visibility: visible;}
#company2 {margin: 210px 350px; position: absolute; z-index: 1; visibility: visible;}
#company3 {margin: 210px 450px; position: absolute; z-index: 1; visibility: visible;}
#company4 {margin: 210px 550px; position: absolute; z-index: 1; visibility: visible;}
#company5 {margin: 210px 650px; position: absolute; z-index: 1; visibility: visible;}
#contactinfo {margin: 270px 170px; position: absolute; z-index: 2; visibility: visible;}
#contactimage {margin: 270px 170px; position: absolute; z-index: 1; visibility: visible;}
#greenbackground {margin: 230px 170px; position: absolute; z-index: 1; visibility: visible;}
#greybackground {margin: 230px 170px; position: absolute; z-index: 1; visibility: visible;}
#aboutusheader {margin: 240px 260px; position: absolute; z-index: 2; visibility: visible; width: 600px;}
#aboutusparagraph {margin: 290px 180px; position: absolute; z-index: 2; visibility: visible; width: 630px;}
#list1 {margin: 400px 190px; position: absolute; z-index: 2; visibility: visible; width: 200px;}
#list2 {margin: 400px 400px; position: absolute; z-index: 2; visibility: visible; width: 200px;}
#list3 {margin: 400px 610px; position: absolute; z-index: 2; visibility: visible; width: 200px;}
#flashmovie {margin: 240px 200px; position: absolute; z-index: 2; visibility: visible; width: 300px;}
My website is www.avavenue.com. Thanks a ton to anyone who helps out . I'm stumped. I used a few tutorials and alot of trial and error to make this website. I'm happy with it for the most part but when I make the browser into a smaller window (same for computers using smaller resolution) and I get a scroll bar on the bottom, when I then use that scroll bar and move it to the right all I get is a black bar where content should be. Anyone have any idea what the deal is? I'm thoroughly confused. www.jessevadnaisphotography.com On this page: http://tinyurl.com/charpages The font is currently navy blue and I can't get it black with the <font color="black"> TEXT </font> tag. Help? Hello, Thefallenshadow has been helping me with my website and introducing me to CSS because I am new to web design, but unfortunely he has not replied to my PM so I am posting here for help. I was about to start adding images of my work to my website, however it appears the website background images are not aligned correctly, even after I made sure they are the exact same pixel dimensions as the actual images. If someone could download my website below and view the index.html page (or view picture below), you will notice thin black horizontal lines in several places. The UFO picture in the corner is also not correct. These black lines appear in Internet Explorer, FrontPage and Dreamweaver but do not show inside Firefox. What's causing this? I am not sure how to fix it. http://homepage.ntlworld.com/stephan.../Portfolio.zip Thanks http://junksen.tumblr.com/ Hi! i just wanted to know if i can make the right bar, the post area, and the left bar transparent so i can see the background through them if anyone can help me out, please let me know y0! Hiya, just wondering if anyone can help me fix the scrolling on my uni project. Here is the link http://clairelaity.site90.com/techniques2.html , many thanks! I'm just wondering, is it possible to stop the main page from scrolling down, and instead, add the scroll bar in the table cell that i want it in. if it is possible...what is the code i can use to operate this? help much appriciated... ^-^ Anchieh In this TD i am not able to see all of the information....how do i add scroll bars??? <td class="DetailsContents" style="overflow:scroll"> <asp:Literal ID="litLogDetail" runat="server" /> </td> .DetailsContents { font-family:Verdana; font-size:11px; background-color:white; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; color:#333333; vertical-align:top; overflow:scroll; height:800px; } How do i change the color? and "Style" i guess. I have seen it alot, i have been going through alot of source code, but i havent found it yet. I do have a css for my website so if it goes in there, let me know also. Is there a way to customize those ugly default scroll bars? as they take up quite alot of space when you use them just for a div (with overflow: auto; in the css). So I was wondering if I could possibly make them smaller? (with cross browser support of course) I am using the following code (together with CSS) to generate a simple nav bar: <a href="index.html" title="contact us" class="lastMenuItem">contact us<span class="desc"> Contact Us</span></a> <a href="prices.html" title="price list">price list<span class="desc">latest deals</span></a> <a href="about.html" title="about us">about us<span class="desc">our apartments</span></a> <a href="contact.html" title="home" class="active">home<span class="desc">welcome</span></a> By using the same code on each page, and changing class="active" onto each page shows the active page in the menu bar. When trying this in the first line (which by CSS is the last option), I get code showing in page view and it don't work. Anybody got any ideas? Regards Brisar -------------------------------------------------------------------------------- I'm hoping someone has fresher eyes than I do. I've been working on this for nearly 3 hours and just can't figure out what is wrong. the page works great in firefox, chrome, but in IE 7 it does not like me at all. I'm getting no scroll bars and the page stops at one of the fields rather than continuing to the end of the page. Can you help? Here is the page, thanks. http://www.sentrylogin.com/sentry/me...40&Ppl_ID=2977 Laura I want to Make my website Navigation just like this site http://www.dynamicdrive.com/dynamicindex17/ Like.. in the left hand side you have navigation names and when we click one of them the results come on righ side . And agian if we click anything on right side , only right side changes not the left and top. I want same like this . I know I can do this with frames . But because of these disadvantages I don't want to do this : 1. One of the main disadvantage of frames is search engines will not deal with them properly. i.e, search engines (including most popular ones) will not index pages containing frames as its hard for them to search for a specific content and move backwards to check to which frameset each page belongs to and retrieve all the pages in the frameset. 2. Its hard to navigate through pages in frames when we have more than two or three frames. 3. Its difficult to print the content of all frames when compared to a normal web page. 4. We cannot bookmark individual pages using browser's Favourites Menu. Please help me . Let me know what I can do. Help Me as soon as you can. ....I had enough! My footer is all over the place! Why can't it just move down when the text becomes longer! I am just using <div>. My header, the nav bar and the right side bar are fixed and I want the footer to just fit in underneath. Anybody got some code which solves that problem? Chris PHP Code: <?php echo "<div class='mainarea'>"; include ("includes/header.inc"); include ("includes/navigation.inc"); if ($var == 'service' or $var == 'consultancy') { echo "<div class='textarea_services'><p><br /></p>"; include ("text.php"); echo "</div>"; } else { echo "<div class='textarea'><p><br /></p>"; include ("text.php"); echo "</div>"; } if ($var != 'service' and $var != 'consultancy'){include ("includes/rightside.inc");} if ($var != 'privacy'){include ("includes/footer.inc");} echo "</div>"; ?> I have a page with a black background, and a script so that when a link is clicked the page fades out and then redirects to the link location. Since the background is black, the page fades to black before redirecting. How can I have it fade to white and then redirect? Hi there, I know nothing formal about HTML, hence the code below being converted from an Open Office file. Hopefully it is readable - it is some declarations, a body with maybe 10 links in it, and then an embedded video code from Exposure Room. I have the alignment how I want it, but the background-black in the body doesn't work any more. Is anyone able to show me how to keep the center alignments I have but also switch the background of the whole page to black? It works if I take out the <center> tags but then everything is left aligned, which I don't like. Any help would be appreciated, cheers, Tony Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!--This file was converted to xhtml by OpenOffice.org - see http://xml.openoffice.org/odf2xhtml for more info.--><head profile="http://dublincore.org/documents/dcmi-terms/"><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/><title xml:lang="en-US">- no title specified</title><meta name="DCTERMS.title" content="" xml:lang="en-US"/><meta name="DCTERMS.language" content="en-US" scheme="DCTERMS.RFC4646"/><meta name="DCTERMS.source" content="http://xml.openoffice.org/odf2xhtml"/><meta name="DCTERMS.creator" content="Tony Wilkes"/><meta name="DCTERMS.issued" content="2011-04-17T19:59:38.83" scheme="DCTERMS.W3CDTF"/><meta name="DCTERMS.contributor" content="Tony Wilkes"/><meta name="DCTERMS.modified" content="2011-04-17T20:31:54.51" scheme="DCTERMS.W3CDTF"/><meta name="DCTERMS.provenance" content="" xml:lang="en-US"/><meta name="DCTERMS.subject" content="," xml:lang="en-US"/><link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" hreflang="en"/><link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" hreflang="en"/><link rel="schema.DCTYPE" href="http://purl.org/dc/dcmitype/" hreflang="en"/><link rel="schema.DCAM" href="http://purl.org/dc/dcam/" hreflang="en"/><base href="."/><style type="text/css">
@page { }
table { border-collapse:collapse; border-spacing:0; empty-cells:show }
td, th { vertical-align:top; font-size:12pt;}
h1, h2, h3, h4, h5, h6 { clear:both }
ol, ul { margin:0; padding:0;}
li { list-style: none; margin:0; padding:0;}
<!-- "li span.odfLiEnd" - IE 7 issue-->
li span. { clear: both; line-height:0; width:0; height:0; margin:0; padding:0; }
span.footnodeNumber { padding-right:1em; }
span.annotation_style_by_filter { font-size:95%; font-family:Arial; background-color:#fff000; margin:0; border:0; padding:0; }
* { margin:0;}
.P1 { font-size:12pt; font-family:Trebuchet MS; writing-mode:page; text-align:center ! important; color:#b3b3b3; }
.T2 { font-size:10pt; }
<!-- ODF styles with no properties representable as CSS -->
{ }
</style></head><center><body dir="ltr" style="max-width:21.001cm;margin-top:2cm; margin-bottom:2cm; margin-left:2cm; margin-right:2cm; background-color:#000000; "><p class="P1">Lying Down</p><p class="P1">*</p><p class="P1"><a href="http://www.lyingdown.co.uk/index.xhtml">Trailer</a> * <a href="http://www.lyingdown.co.uk/part1med">Part 1</a> * <a href="http://www.lyingdown.co.uk/part2med">Part 2</a> * <a href="http://www.lyingdown.co.uk/part3med">Part 3</a> * <a href="http://www.lyingdown.co.uk/part4med">Part 4</a> * <a href="http://www.lyingdown.co.uk/part5med">Part 5</a> * <a href="http://www.lyingdown.co.uk/part6med">Part 6</a> * <a href="http://www.lyingdown.co.uk/part7med">Part 7</a> * Download</p><p class="P1"><span class="T2"/></p><p class="P1"><a href="http://www.lyingdown.co.uk/indexlow"><span class="T2">Lowest quality</span></a><span class="T2"> * </span><a href="http://www.lyingdown.co.uk/indexhigh"><span class="T2">Highest Quality</span></a></p><p class="P1"><span class="T2"/></p><p class="P1">*</p>
<object id="xrPf8470a83ede543789fc18d1556be86e9" width="640" height="360" type="application/x-shockwave-flash" data="http://exposureroom.com/flash/XRVideoPlayer2.swf?domain=exposureroom.com/&assetId=f8470a83ede543789fc18d1556be86e9&size=md&titleColor=%23ffffff"><param name="movie" value="http://exposureroom.com/flash/XRVideoPlayer2.swf?domain=exposureroom.com/&assetId=f8470a83ede543789fc18d1556be86e9&size=md&titleColor=%23ffffff" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="True" /><param name="wmode" value="opaque" /></object><div><div class="viewOnXRDiv"><a href="http://exposureroom.com/f8470a83ede543789fc18d1556be86e9" class="viewOnXRLink" title="Lying Down trailer by Tony Wilkes - View it on ExposureRoom" target="_blank">View on ExposureRoom</a></div></div>
</body></center>
</html>
Hey everyone, I'm trying to set my background image, but for some reason it has a large black bar at the bottom, where the pink gradient should actually start at the bottom so that you cant see the black bar? I'm trying to upload my Index.html file, but when I do the image loader says that its not a valid file? Any ideas? |
|||||||