|
HTML - Odd Problem / Graphic Distorted
In Opera, IE 8, and Chrome, a single graphic image on my webpage apprears distorted.
It looks fine in Firefox. The website is the main page of cousincouples.com and the problem is the yellow pixels/yellow line at the very bottom left of the page (Left of the copyright information). One of the graphics appears to wrap within the cell! If anyone could point me in the right direction, I would appreciate it. Similar TutorialsHi Am here to look for some help about a problem I can't seem to "overcome" in the layout of my website. I put the background in bright pink so the problem kinda "jumps" to the eye. It is available here : http://www.guitarbattle.fr/gb_test.html or you can also copy and paste this code in an HTML document and see how it behaves (this is a full copy of the source code of that page linked above) : HTML Code: <HTML> <HEAD> <TITLE>Guitar Battle</TITLE> </HEAD> <body bgcolor=ff00ff> <br><br> <center> <table CELLSPACING="0" CELLPADDINg="0" BORDER="0"> <tr> <TD colspan="5"> <img src="http://www.guitarbattle.fr/interface_haut.jpg"> </TD> </tr> <tr> <TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_gauche.jpg"> </TD> <TD> <img src="http://www.guitarbattle.fr/interface_situ.jpg"> </TD> <TD> <img src="http://www.guitarbattle.fr/interface_prin.jpg"> </TD> <TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_video.jpg"> </TD> <TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_droite.jpg"> </TD> </tr> <tr> <TD colspan="2"> <img src="http://www.guitarbattle.fr/interface_part.jpg"> </TD> </tr> <tr> <TD colspan="5"> <img src="http://www.guitarbattle.fr/interface_bas.jpg"> </TD> </tr> </table> </center> </HTML> I hope someone can tell me what mistake I did that makes the various parts not well aligned and loosing 1 to 3 pixels here and there. Thanks a lot ! Hi Guys, I just ran into into a serious problem with IE. I have develop a web application which works fine and displays data in correct format when running it on localhost. But since I have moved the application on server and accessing through network IP, I am getting distorted font, java script failure. I also tried opening website running on server on my system with my own intranet IP and still I am getting distored font. The application only works fine when i am running it on localhost. I am using IE 8 for and expected users are also going to use it thorough IE only. Please give me some advice on this. Thanks & Best Regards, Gaurav Bhardwaj I'm attempting to center the logo / table located at the top of the page. I tried several various forms of alignment commands, all with no success. Any help is appreciated. Site: http://blog.camhabib.com I'm starting to develop a (rudimentary) website for my sis. I've noticed a little graphic glitch in IE only. What's the best forum to post my question? HTML? CSS? Here's the page in question: http://www.coldvalleyfarm.com/sheep.htm In IE only, at the bottom of the left row of pictures, there's a small white square with a white dot in the middle. Any idea what could be causing that? I've validated the pages, but I know IE isn't always compliant. This is with IE 7.0, btw. Thanks in advance! Hi guys, I'm very new here - literally just searched the web for help on this problem which has been plaguing me for some time... I'll post the code below, but basically, the div_id centre_image, the body text and the right hand side graphics are correctly formatted just in the wrong place! I need them to be to the right hand side of the Left hand menu... I'm hoping I make sense!? There is CSS as well but not sure whether or not this is a CSS issue or html! I would be really greatful if someone could help me out. I'm fairly new to website design but am trying my best using various tutorials on the web and compile something half decent! Thanks in advance, Graham. 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Double Glazing | Windows | Doors | Conservatories | Rooftrim</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="email_header"><a href=" mailto: xxxx@zurichtitanium.com">xxxx@zurichtitanium.com</a></div>
</div>
<div id="blue_banner">
<h1>Double Glazing Worcester</h1>
</div>
<div class="cleaner"></div>
<div id="menu_wrap">
<div id="tabs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Doors</a></li>
<li><a href="#">Conservatories</a></li>
<li><a href="#">Rooftrim</a></li>
<li><a href="#">Get a Quote</a></li>
</ul>
</div>
</div>
<div id="holder">
<div id="lhs_menu_wrap">
<div id="windows_menu">
<ul>
<li><a href="#">Sleek White</a></li>
<li><a href="#">Woodgrain Collection</a></li>
<li><a href="#">Specialist Finishes</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Energy Saving</a></li>
<li><a href="#">Maintenance Free</a></li>
<li><a href="#">The Logical Choice</a></li>
</ul>
</div></div>
<div id="centre_image">
<div id="centre_LHS_pic"></div>
<div id="centre_RHS_pic"></div>
<div id="getquote_button"><a href="#">Get a Free Quote...</a></div>
</div>
<div id="RHS_Content">
<div id="rhs_window_offer">Double Glazed Windows...<div id="win_text1"><a href="#">Get Quote</a></div></div>
<div id="rhs_cons_offer">Your New Conservatory...<div id="win_text2"><a href="#">Get Quote</a></div></div>
<div id="rhs_trim_offer">Transform Your Roofline...<div id="win_text3"><a href="#">Get Quote</a></div></div>
<div class="guarantee_logo"></div>
</div>
<div id="body_text">
If you are considering enhancing your home, you owe it to yourself to get a professional consultation. At Zurich Titanium we pride ourselves on giving you exactly what you want. Whether it be treating yourself and your home to new <h2>double glazing windows</h2>, <h2>doors</h2>
or a <h2>conservatory</h2>, invite us to show you what we can do. We guarantee you won't be disappointed.
<p>We offer a fully customisable suite of Home Improvement Products, tailor made for your home, to ensure you get what you want and need, and not wasting money on features you'll never use. With our own highly skilled installers, we are able to keep quality control in house, enabling us to give, as standard, the unrivalled <b>Zurich Titanium 10 Year Guarantee</b> on all work undertaken.</p> <p>Our bespoke quotation service, available totally free of charge, will allow you to design the windows or doors, conservatory or roofline, most suited to your home, give you an accurate assessment of the work involved, and of course an exact price.</p>
<div id="body_footer"></div>
</div>
</div>
<div id="footer">Zurich Titanium Home Enhancements Ltd, Registered in England and Wales xxxxxxxx. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</div>
</body>
</html>
And CSS to follow... It may be somewhat rough around the edges; different hints and tips put together from across the web! Thanks so far Michael... OK what I need to do is find a way to make a specific graphic change automatically on a certain date and change again on another date. A client of mine is having me design his logo so that the logo resembles the season eg: On Christmas his logo would include a Santa Clause and on Halloween there would be a pumpkin within his logo etc... You get the idea... I want to design each logo and have them change at the appropriate time of year. Thank you all in advance On some websites where you type in the link and you are on the site in front of the link where normally E for the internet they change it to an image. Here is an example http://www.bf2player.com click on the link and look at the address bar. HOW CAN I DO THAT. Please Help MCBGamer. Hey guys I'm having a terrible time getting some graphic logos to layout. I know the coloring right now is not looking up to par either so don't judge me too bad I have a header div with a nav div inside and then a content div below this with a swf slide show inside. Basically inside the header div I have 5 graphics and then a nav div nested inside below that. My problem is that I want 2 of the logos aligned to the left and close to centered up/down inside the header div, then I want the main masthead logo centered in the middle of the header div up/down and left/right, and finally I want the other 2 logos floated right and centered up/down. I'm trying various methods and the best I have so far shows the middle masthead logo not correctly centered, and the 2 left logos floating left, but the far 2 right logos do not show up at all. The page is located at http://www.atlanta-web.com and I'll past all of my code below. index.html snippet Code:
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#000080" alink="#800000" leftmargin="0" topmargin="5" marginleft="0" margintop="5">
<script type="text/javascript" src="fsmenu_commented.js"></script>
<script type="text/javascript" src="menuset.js"></script>
<link rel="stylesheet" type="text/css" href="listmenu_h.css" />
<link rel="stylesheet" type="text/css" href="listmenu_h_settings.css" />
<style type="text/css">
#navitoolbarcontainer a {
line-height: 16px;
}
</style>
<div id="header">
<img class="award1" src="nahb.gif" /><img class="award2" src="gahomebuilders.gif" />
<center><img src="Jhomes.jpg" /></center>
<img class="award3" src="southernlivingmember_sm.gif" /><img class="award4" src="lobb.gif" />
<!-- START TOP TOOLBAR -->
<!--<div id="heightcontainer"></div>-->
<div style="width: 100%;" id="navitoolbarcontainer">
<div style="margin: 0px; padding: 0px; width: 100%;">
<div id="navitile" style="width: 100%;">
<ul class="menulist" id="listMenuRoot" style="height:22px;">
<li style="margin-top:0px;">
<a class="gt" href="index.html" style="font-size: 10px; font-family: arial,verdana,helvetica; text-decoration:none;"> <b>Jeffery Homes Inc.</b> </a>
<ul id="listMenu-id-1">
.
.
.
NAV Bar HTML Cut for space sake
.
.
.
<div style="margin-top: 0px;" id="lightgrey">
</div>
</div>
</div>
</div>
</div>
<div id="content" style="width: 100%; background-color: #6B6637">
<div id="slideshow">
<object width="600" height="350">
<param name="movie" value="slideshow1.swf" wmode="transparent">
<embed src="slideshow1.swf" width="600" height="350" wmode="transparent">
</embed>
</object>
<br />
<br />
</div>
</div>
<!-- END TOP TOOLBAR -->
css file1 Code: @charset "UTF-8";
a.gt{ text-decoration:none}
a.gt:hover{text-decoration:none}
a.gt:visited{text-decoration:none}
a.gt:link{text-decoration:none}
a.gt:active{text-decoration:none}
#header { margin: 0px; padding: 0px; width:100%; min-width:830px; width:100%; background-color: #AFAB73; position: absolute; left: 0px; top:0px; font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 0}
.award1 { float:left }
.award2 { float:left }
.award3 { float: right }
.award4 { float: right }
#navitile{width:820px; margin-left:0px; height:22px; background-repeat:repeat-x; position:absolute; color: #F2FFE4; left:0px; top: 0px; font-family:arial,verdana,helvetica; font-size:8px; white-space:nowrap; }
#navtile a{ color: #F2FFE4 }
#navitoolbarcontainer{width:100%; min-width:830px; width:100%; height:22px; position:absolute; top: 100px; left:0px; font-family:arial,verdana,helvetica; font-size:8px; background-image:url('background_end_fixed.png'); background-repeat:repeat-x; white-space:nowrap; margin:0px; padding:0px; z-index:1000}
#navitoolbarcontainer a{color: #F2FFE4}
#content {margin: 0px; padding: 0px; width:100%; min-width:830px; width:expression('100%'); position: absolute; left: 0px; top: 122px; font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 1}
#slideshow {
margin: 0 auto;
position: relative;
top: 30px;
height: 480px;
width: 600px;
}
#heightcontainer{position:relative; height:17px; width:99%; background:transparent;}
#globalform{padding:0px; margin:0px}
#lightgrey{text-align:left; color: #F2FFE4; text-indent:5px; background-image:url('background_end_fixed.png')}
#lightgrey .inputglobal{font-size:9px; font-size:expression('8px'); text-align:left; margin-top:0px; margin-left:2px; background-repeat:no-repeat}
#lightgrey .inputglobal:hover{font-size:9px; text-align:left; margin-top:0px; background-color:#ccc}
#lightgrey a{font-family:sans-serif; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; top:1px; top:expression('-2px'); position:relative}
#lightgrey a:link{text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px}
#lightgrey a:visited{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}
#lightgrey a:active{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}
#lightgrey a:hover{display:inline; text-decoration:none; color:#fcf2ca; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}
A lot of this css is for the menus that i found on a site and have highly modifed, but I've used class/id's for most of everything so it should be easy to see what is what. Thanks for any help that you all can provide. This site has been a godsend for getting help. I created a sliced image / navigation in Fireworks CS5 and implemented it on a page with success. I then attempted to implement the same code to the header of a WordPress theme, giving me some issues. The actions work correctly, but the images are significantly lower, blocking a portion of the remaining page, and not correctly aligned with one another. I checked for conflicts in the CSS, as well as other simple errors, but couldn't really find what the cause was. Any suggestions? Homepage (correctly displayed graphic): http://camhabib.com WordPress (incorrectly displayed): http://blog.camhabib.com Hi everyone, I hope I have posted this in the right area. This is my first time posting here. I currently have my main pages listed at the top of my site as graphics (see fussybaby.ca). I would like to potentially remove these graphics and use text links instead - I had the graphics designed for me, so I can't just go in and make new ones, however I'd like to change/rearrange the links and add some new ones. So my question is: How hard is this to do? Is this something I need to hire someone to do for me? Thanks in advance for any advice! I would like to have an image that takes 2 url like the following image... is it possible? if so, can someone please tell me how this could be done? Thank you very much.. NOTE: I tried doing this... <map name= 'url1' > <area shape= 'poly' coords= ' 0 , 0 , 50 , 0 , 0 , 50 ' href= 'url1.html' > </map> <a href= 'url2.html' > <img src= 'img.jpg' width= 50 height= 50 usemap= '#url1' > </a> but this only get 'url1' woring... Okay, I know that this problem is going to be really really easy, but I forgot how to do it. I use to own an older website and forgot the code. Anyways, I only know how to describe it. When I minimize the screen, it is minimizing the whole thing and collapsing it making the iframes smaller and the text fit into a smaller space. Most websites have a code (i don't know what it is) so that when someone minimizes their browser, it just makes the browser smaller and not the actual page. Here's what it looks like: http://www.freewebs.com/noeylani94/index.htm Try minimizing that and see how it looks. It collapses the whole page right? Can someone tell me the code how to fix it? Thanks =D Hello people. having a problem with my website in IE 6.0. http://sw11.it/devdev/ it puts a blue bar accross the header? Please can somebody help! Thanks Whenever I try to send a PM it is telling me I need to wait over a million seconds, and it never goes away.. Help? I know nothing about html really but i am working on developing a site and i can't get rid of this problem. I am not even sure if this is the correct forum to put this in! I have made a nav bar that goes horizontally. When someone hovers over the top, the entire contect of the site moves up about 5 pixels. This problem can be viewed here : http://www.djcarchitect.com/company/team/indexpage.html does ANYBODY know how I can fix this problem? Thank you so much. Hi guyz! I would need help with my website updating if you can call it so. I have a sidebar in every .htm file and when i add new content I'd have to update ALL of my pages. That would be very complicated. So, what i would want (IF possible) my sidebar to load from another .htm or .txt file. And, I know this COULD be done with FRAMES but the frames would block a few things. And I'm a person searching for challenges. Check out my webpage to see what i mean. Here If I talk bad english, SORRY FOR THAT let me know so I could learn better Hi Could some one please have a look at the code for this site for me as it displays perfectly in IE6/7 but is so far off the mark in firefox, not tried any others. http://www.scottishconsumercredit.com/_dev_colin I can't see where I am going wrong thanks Hello, I am fairly new to web programming, and I have taken over the web administration at my work. The page I am working with is an absolute mess, but I have one bug that I just cannot figure out for the life of me. It is an overlap problem, where one of the tables overlaps the one to the right of it, even though there doesn't seem to be anything "pushing" it out further, like unwrappable text or anything like that. It only occurs in IE/Win, I have viewed in both versions 6 and 7. If anyone could give me any suggestions, I would greatly appreciate it. URL: http://www.yonasmedia.com I have a photoblog site that I use PixelPost on. I updated the theme and, for some reason, the About page isnt showing the footer like the other pages are. This is how the footer is SUPPOSED to be: http://www.sthompsonphoto.com/galler...owse&pagenum=1 and this is how its displaying on the About page: http://www.sthompsonphoto.com/gallery/index.php?x=about Its all shoved into the main DIV and I cant figure out why. Also, there is a line at the top of the main DIV that wont go away. Im pretty new at all this so Im sure its something that Im overlooking. Any help would be great! Thank you! I"m haveing a problem with my page, there is a gap where I don't want one to be, here is my code, I don't know if it is the css or html. the gap is between the leftBar and the content. I"ve used *html with the height:1px before, for the sideMenu, but I don't know if the same trick would apply for width. index.php: HTML Code: <?php
session_start();
?>
<!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>WootWoot</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body><center>
<div id="wrapper">
<div id="header">
</div>
<div id="mainnav">
<ul id="mainMenu">
<div id="spacer"> </div>
<li><a href="index.php">Home</a></li>
<li>
<?php
if(isset($_SESSION['validUser'])){
echo '<a href="logout.php">Log Out</a></li>';
}
else if(!isset($_SESSION['validUser'])){
echo '<a href="login.php">Log In</a></li>';
}
?>
<li><a href="profile.php">Profile</a></li>
<li><a href="daily.php">Daily</a></li>
<li><a href="search.php">Search</a></li>
</ul>
</div>
<div id="leftbar">
<ul id="sideMenu">
<li><a href="shorts.php">Submit a short story</a></li>
<li><a href="popular.php?select=today">View popular works from today</a></li>
<li><a href="popular.php?select=week">View popular works from last week</a></li>
<li><a href="popular.php?select=tmonth">View popular works from this month</a></li>
<li><a href="popular.php?select=lmonth">View popular works from last month</a></li>
</ul>
</div>
<div id="content">
Main content here.Main content here.Main content here.Main content here.Main content here.
Main content here.Main content here.Main content here.Main content here.Main content here.
Main content here.Main content here.Main content here.Main content here.Main content here.
Main content here.Main content here.Main content here.Main content here.Main content here.
Main content here.Main content here.Main content here.Main content here.Main content here.
Main content here.Main content here.Main content here.Main content here.Main content here.
Main content here.Main content here.Main content here.Main content here.Main content here.
</div>
</div>
</center></body>
</html>
style.css: Code:
/* Page Layout */
body
{
text-align:center;
background-color:Silver;
}
#wrapper
{
width:901px;
background-image:url(Images/sidebar_1.jpg);
background-repeat:repeat-y;
}
#header
{
height:120px;
width:900px;
background-color:Black;
float:none;
color:Black;
}
#mainnav
{
height:20px;
background-image:url(Images/bg_2.jpg);
background-repeat:repeat-x;
background-position:bottom left;
}
#spacer
{
float:left;
width:160px;
}
#leftbar
{
float:left;
width:160px;
color:Black;
background-image:none;
}
#content
{
margin-left:160px;
color:Black;
padding:5px;
background-color:Gray;
min-height:30em;
}
/* Navigation */
ul#mainMenu
{
list-style-type:none;
padding:0px 35px 0px 10px;
margin:160px;
display:inline;
}
ul#mainMenu li
{
text-align:left;
float:left;
}
ul#mainMenu a:link,
ul#mainMenu a:visited
{
background-image:url(Images/bg_2.jpg);
background-repeat:repeat-x;
background-position:bottom left;
padding:0px 35px 0px 10px;
border-right:solid 1px gray;
text-decoration:none;
font-family:Arial Verdana Sans-Serif;
text-align:left;
text-transform:uppercase;
font-size:1em;
color:Black;
font-weight:bold;
display:inline;
}
ul#mainMenu a:hover
{
background:url(Images/bg_3.jpg) repeat-x top left;
text-decoration:none;
font-family:Arial Verdana Sans-Serif;
text-align:left;
text-transform:uppercase;
font-size:1em;
color:Black;
display:inline;
}
ul#sideMenu
{
margin:0;
padding:0;
list-style:none;
width:160px;
}
ul#sideMenu li
{
display:inline;
}
*html #sideMenu a
{
height:1px;
}
ul#sideMenu a:link,
ul#sideMenu a:visited
{
background:url(Images/sidebar_1.jpg);
background-repeat:repeat-y;
border-bottom:1px solid gray;
padding:15px 10px 15px 10px;
text-decoration:none;
font-family:Times Verdana Sans-Serif;
text-align:Center;
text-transform:uppercase;
font-size:.8em;
color:Black;
font-weight:bold;
display:block;
}
ul#sideMenu a:hover
{
background:url(Images/sidebar_2.jpg) repeat-y;
text-decoration:none;
font-family:Arial Verdana Sans-Serif;
text-align:Center;
text-transform:uppercase;
font-size:.8em;
color:Black;
font-weight:bold;
display:block;
}
|
|||||||