|
HTML - Website Border Background Problem
Hi,
I have an image "m1" set as the background of a table on my website. The table is set to the width of the image "340". However, when I add text it pushes the border and the image repeats/cuts off. http://www.monkeygambling.com/newpage.htm This problem only happens in IE, not in opera. Can anyone help? thanks Similar TutorialsHello everyone! I am so grateful that there are sites like this to help those like me. I'm ready to be hit by rotten tomatoes because my method for building my first site probably breaks tons of rules. I used Photoshop to create a webpage by slicing a single image with the intention of laying it out in a table. When I first sliced the image and simply set each image using "img src=" in each Table Data cell, it came together fine and looked perfect. The problem happened when I made one of my images the background image for the cell. The reason I did this is because this is going to be my main "Content" area and I want to be able to enter content over the image. For some reason, right when I made this change, the cell directly to the left of my "main content cell" is pushing to the right and creating unwanted blank space...and I can't for the life of me figure out why. I'm pulling my hair out and I'll probably cry myself to sleep tonight. I thought it was my HTML and found a tiny bit of CSS to help, but the problem remains. Thanks so much in advance for any assistance you can provide. The site is here (I added red borders to the table for assistance with review): http://www.geocities.com/mena_beena/Rosco.html Here is my HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="rosco.css" /> </head> <body bgcolor=black> <table bordercolor=red border=1 cellspacing="1" cellpadding="0"> <tr> <td colspan=3><img src="Template4_01.jpg"></td> </tr> <tr> <td colspan=2><img src="Template4_02.jpg"></td> <td><img src="Template4_03.jpg"><br><img src="Template4_04.jpg"></td> </tr> <tr> <td><img src="Template4_05.jpg"></td> <td class="bg">asdfasdf</td> <td><img src="Template4_07.jpg"><br><img src="Template4_08.jpg"><br> <img src="Template4_09.jpg"><br><img src="Template4_10.jpg"></td> </tr> </table> </body> </html> Here is my CSS Stylesheet: Code: td.bg{
background: url(Template4_06.jpg);
}
Hi, On my website I have a breadcrumbs section on top of the page and on the side of the page, I have a navigation section. The problem that I am having is that the border-bottom of the breadcrumb section - streches out to 100% of the screen, but the height of the navigation section does not. I have kept the height as 100% (as I did with the width of the other section) but the border-right and the background colour cuts off. The website is: http://www.cse.dmu.ac.uk/~p04283218/mainframe9/ Does anyone have any suggestions? Thanks. I tried to search and google, but I don't really know what to search for... Im looking for some code on how to put a black border/frame around the content on my landingpage... can someone help me? Thanks for your time! Sorry, I have no idea what to call it. The below linked website has a green sort of border on both sides of the main white page: http://www.lusu.co.uk/bowland I was wondering what coding could be used to achieve that effect? Thank you, Suzanne. Hi All, Not sure if this is the ideal place for this because im just looking for advice..... But here it goes Im currently in the process of re-designing my works websitebecause the pleb that done it before obviously had no idea what he was doing... w3c - 96 Erros and 1 warning! on the landing page :-O........ im sticking to the current back ground as that goes with the branding of the company the page im working on is the "Apply Now" page, where the user will fill in all details regarding them self and then goes on to the insurance details...(See attached image) im currently using a gradient which is designed in CSS no Repeat of images lol!! im just trying to think of what sort of back ground color or even maybe not a background color just a border? which will look after all the texts/DropDown boxes etc... I wanna bring the site in to 2011!! not leave it how it is! the background im using is the Gradient attached image. Any advice or maybe some images of designs or techniques to achieve a good looking form whilst keeping a professional site would be highly appreciated. I refuse to use a gray BackGround!!!! :-) p.s the company is an Insurance Company Hi All, I am building a website for a friend. The site is built in Dreamweaver CS2. I need to have the top part of the background in black and the bottom part of the background in white. I have done this so far with a table, 100% width, background black. But when I view it in IE or Firefox, the background has a white border around it, rather than coming right to the edge of the screen. You can see what I mean he Test Site Any help is much appreciated. I am currently designing a website and I have to allow the user to change the background to a colour of his/her liking. I have a javascript function which works fine, but the problem is when you navigate to a different page the background colour will change to the default colour. I need to somehow allow the user to change the background colour for the entire website from any given web page. Below is the function i am using. Thank you in advance for your assistance. <script type="text/javascript"> function bg_color(c){ var b = document.getElementsByTagName("div")[0]; var d = document.getElementsByTagName("body")[0]; b.style.background = c; d.style.background = c; } </script> I have the following question: I have a website with a background image and on that background image I have some text. When I scroll down I want my background to stay where it is and only the text should scroll down. What should I do to make this like that? Hi, I'm wondering if there is a way to ensure that my website background will work with any resolution i.e. will the flowers stay flush with the bottom corner of the page? http://imageshack.us/photo/my-images/819/bg1ev.jpg/ i am currently using wordpad and making a website on rappers i am trying to add a video which will be a FULL-SCREEN video for the background but i dont have a clue what to do i have this at the moment to stream the video <img border="0" dynsrc="John Cena 6th Titantron.wmv" start="fileopen"> please help Hi guys, I'm currently trying to sort out the background for a website. What I'd like is to have a silhouette of a few people on a gradient background. I'd like to keep the quality high, but it also makes the file size large. If there were no silhouette then I would have a one pixel strip of the gradient set to repeat. Is it possible to add two background pictures, or is there another way I can reduce the file size that I hadn't thought of? Hello everyone I have run into a roadblock. I am trying to make a background image scale properly with Internet Explorer. I have successfully made the image fit the web browser right, using this code in a CSS class. The code I am using is as written: PHP Code: body.background { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../Images/Website Background-3.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../Images/Website Background-3.jpg', sizingMethod='scale')"; } this code makes the background I am using work correctly in Internet Explorer. However, when I use this code, it makes the rest of the website stop working. I can no longer click on any of the links on the page, or anything of the sort. However, all my styles for the links still remain on the page. Any suggestions? Thank you all, Mitch Guzman I've got another problem with my website. I've taken a screenshot that I wanted for my website background. But since it was took on my screen, it doesn't fill the screen on wider monitors. I'm just wondering if there's any information on auto-resizing a website background. Or is it a scirpt/CSS/php style thing? This problem seems abit more complex than me previous problem. I'm on a 19 inch monitor. Here is my website for those that have bigger screens than me. http://www.dawncraftmc.com/ Hi, I want to change the background color of my textbox on focus and change it back to white on onblur event. Issue: When i change the back ground color for text box on focus it properly changes it. But when i leave the focus from textbox border color for text box is impacted and its changed to white. Please help so that border color for textbox is not impacted only background color should change here is the sample code <code> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <p> <input name="text1" type="text" id="text1" value="textbox 1" onfocus="this.style.background ='#cad5df'" onblur="this.style.background='white'"> </p> <p> <input name="text2" type="text" id="text2" value="textbox 2" onFocus="this.style.background = 'yellow'" onBlur="this.style.background='white'"> </p> </body> </html> </code> when using the below code on my blog, i still get a border. what am i doing wrong? i have other gifs with NO borders on my blog, but i don't see any difference in the code. <img src="http://www.coolholidaygraphics.com/birthday/animations/animatedgifs5.gif" border="0" /> thanks for any help Hi, I`ve got a problem with some freaky border around my calendar. Look here! In the middle of the Site, you can see a calendar with a border around it. Now comes the crazy one: It`ll shows up only in IE, but not in Opera!!! How comes Thx for your help! when the page gets resized by the browser these thick dark borders show up. anyone know what the deal is? http://www.users.on.net/~bmccowan/tables.jpg Hello, I'm having trouble with the bold line in the code below: Code: <html>
<head>
<title>H&R Properties</title>
<style type="text/css">
table.master
{
height: 100%;
}
td.banner
{
height: 100px;
text-align: center;
}
span.banner
{
font-size: 24pt;
}
td.news
{
width: 200px;
padding-top: 10px;
text-align: center;
}
iframe.news
{
width: 100%;
height: 100%;
}
td.menuandcontent
{
width: 530px;
}
table.menuandcontent
{
width: 100%;
height: 100%;
}
td.menu
{
height: 50px;
background: url('menu_bg.jpg');
text-align: center;
}
td.content
{
text-align: center;
}
iframe.content
{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<table class="master" cellspacing=0 cellpadding=0 border=1>
<tr><td colspan=2 class="banner">
<span class="banner">
<img src="H&R banner.jpg" border=0></span></td></tr>
<tr>
<td class="news">
<iframe class="news" src="news.html" scrollable=yes frameborder=no></iframe>
</td>
<td class="menuandcontent">
<table class="menuandcontent" cellspacing=0 cellpadding=0 border=0>
<tr>
<td class="menu">
<table cellspacing=0 cellpadding=0 border=0>
<tr>
<td><img src="home.jpg" border=0></td>
<td><img src="properties.jpg" border=0></td>
<td><img src="about.jpg" border=0></td>
<td><img src="contact.jpg" border=0></td>
</tr>
</table>
</td></tr>
<tr>
<td class="content">
<iframe class="content" src="content.html" srollable=yes frameborder=0></iframe>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This code produced this: http://www.shahspace.com/border1/ But if I do something as simple as set border to 0 in the bolded line above, I get this: http://www.shahspace.com/border0/ The banner is all of a sudden shifted to the right by about 20 pixels. Why is this? I have an issue. I really need to get rid of the borders in a html project i'm working on. I need to get ride of the borders to make a solid line from the left to the right. My screenshot is he http://terpconnect.umd.edu/~dwallac2/Screenshot.png <?php echo("<table border='0'"); for($i=0;$i<100;$i++){ echo("<tr border='0'>"); for($x=0;$x<100;$x++){ if($i%2){ echo("<td border='0'>"); } else{ echo("<td bgcolor='blue' border = '0'>"); } echo("hi"); echo("</td>"); } echo("</tr>"); } echo("</table>"); ?> i want the blue lines to be solid w/o the white dashes. I would appreciate anything you could do for me. Thanks Dave Hey guys! I have created a table with images in it and for some reason the table doesn't exactly fit (in height) the images, it has like a little 5px border at the bottom and I can't figure out why. I have attached a picture showing the problem. In the image, the gray border is supposed to be there, and is part of the images and background image. But I want the table to end directly at the bottom of the gray bar, and for some reason it has a little lip at the bottom in which the background image begins to repeat again. My code is as follows: 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>
<title>QuickID | Setup Your Account</title>
<style type="text/css">
<!--
a:link { color: #777676; text-decoration: none; font: verdana}
a:visited { color: #777676; text-decoration: none; font: verdana}
a:hover { color: #3366CC; text-decoration: underline; font: verdana}
a:active { color: #777676; text-decoration: none; font: verdana}
-->
</style>
</head>
<body topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0 background="images/bg.gif">
<table cellpadding=0 cellspacing=0 width=100% border=0 align=center background="images/top_bar_bg.jpg">
<tr>
<td>
<table width=980 cellpadding=0 cellspacing=0 align=center style="white-space: nowrap;" height=38>
<tr>
<td align=left>
<img src="images/top_bar_logo.jpg" border=0 height=38 ALT="logo">
<img src="images/top_bar_divider.jpg" border=0 height=38 ALT="divider">
</td>
<td align=left width=750>
hello!
</td>
<td align=right>
<img src="images/top_bar_divider.jpg" border=0 height=38 ALT="divider">
</td>
<td align=right>
<img src="images/top_bar_settings.jpg" border=0 height=38 ALT="settings">
</td>
<td align=right>
<img src="images/top_bar_logout.jpg" border=0 height=38 ALT="logout">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
|
|||||||