|
CSS - Site Not Centering Or Showing Bk Images
Hi
I'm having some problems with CSS and was hoping that somebody on here could help me. Firstly despite having a container (wrap) div set to a padding of : 0px auto; the site is not centering. Second none of my images are showing, I've attempted to add a background and header image but neither are showing. I'm a little confused because the same methods work fine on my wordpress site. Here is a link to the dev site; C:\Users\Keith\Documents\Site\index.html And below is the CSS code; Code: /* ------------------------------
HTML Redefine Tags
------------------------------ */
body {
width: 100%;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background: url (img/background.jpg) no-repeat bottom;
}
input, form, textarea
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
h1 {
font-size: 18px;
}
h2 {
font-size: 14px;
color: #999999;
}
h3 {
font-size: 13px;
border-bottom: solid 1px #DEDEDE;
padding: 4px 0;
margin-bottom: 10px;
}
a:link, a:visited {
color: #0033CC;
}
a:hover {
text-decoration: none;
}
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/* #container has an absolute width (780 pixel) */
#container {
width: 1024px;
background: #ececec;
margin: 0px auto;
}
#topbar {
width: 1000px;
height: 118px;
display: block;
background: url(img/header.png);
float: left;
position: relative
}
#navbar {
width: auto;
display: block;
height: 28px;
}
#navbar a {
heigth: 28px;
line-height: 28px;
padding: 0 8px;
display: inline;
}
#main {
width: auto;
display: block;
padding: 10px 0;}
#column_left {
width: 332px;
height: 387px;
margin-right: 1px;
margin-left: 13px;
background: #000;
float: left;
}
#column_right {
width: 332px;
height: 387px;
margin-right: 1px;
background: #000;
float: left;
}
#column_right_adsense {
width: 332px;
height: 387px;
background: #000;
float: left;
}
div.spacer {
clear: both;
height: 10px;
display: block;
}
#footer {
width: 1000px;
height: 150px;
display: block;
margin: 0 13px;
padding: 10px 13px;
font-size: 11px;
color: fff;
background: #737373;
}
Similar TutorialsFor IE, I have used text-align:center; to define the body tag, which allows the entire website to be centered no matter the browser window size. That method doesn't seem to be working for Firefox, yet I have seen it done before. A few of my divs are using absolute positioning (NOT absolute to the document, mind you, but to a parent div). Could this affect anything? Again, it works fine in IE, but not in Firefox or Safari If body {text-align:center;} is not a good centering tool, I would love any other suggestions. Thanks! Thanks for taking the time to read my question. I am having problems centering my navigation images below the event calendar on my page (link below). I think I know why, but can't get around it. In my general css page (http://www.pierced.ca/Pierced.css) I have the line Code: img {float:left; margin:0; padding:0;}
. I don't know what it does exactly, someone on this forum told me to put it on my page. Without it, my top margins on all my pages don't work. I think it is this code that is affecting my nav images. without the Code: td.centercalnav {
padding: 1% 0 0 44%;
}
which is in (http://www.pierced.ca/PiercedEvents.css) they center to the page, not the table row. With the current code it looks kind of ok in Fire Fox, but worse in IE. What can I do to center the nav images under the calendar. Thanks again, Brad http://www.pierced.ca/pierced-events.htm Hi. I'm new here as well with cSS. Hope someone can explain this to me...darn it...cSS can be frustrating. Here is my CSS code for an external style sheet: #header { background-image: url(images/penpal-inner.jpg); height: 168px; background-repeat: no-repeat; background-position: center top; border-bottom: 20px blue solid; width: 640px;} Here is the xhmtl code: <div id="header"></div> Why won't my background image center horizontally? It stays to the left of the page. If I take out the width (640px), it will center, but than I have a problem with the bottom border. I want the border to be the same width as the image but it is the width of the entire page. So with the width (640 px) in the #header rule, I have the border the same length as the image, but not centered. Without the width, the image centers but the border is now longer than the image. how do i get the image to center on the page horizontally and still keep the bottom border the same width as the image? Help please. thanks Steve. Good Evening, Am very glad to find this board. Am working on my first paid Joomla site - and the Suckerfish menu's do not seem to center, and I cannot find any directions on how to go about making them so. Also, many sites I've visited will scale to the size of the window open (until too small) - am using the JNS Epic Pro Template and was wondering if there was any CSS feature to program the whole site to scale as best possible. Hope this makes sense. Am not new to computers, but rather a newbie to Joomla and CSS (although I do know a little). If any further info is required, please just advise. Thanking you in advance ... going live on 7/1 ... Ok, I know there must be a simple solution to this that I'm blanking on. The website has a background image: Code:
#background {background-image: url(x.jpg);
margin-left: auto;
margin-right: auto;
width: 1024;
height: 760;
z-index: 1;}
So it's centered and the margins auto resize. Now, I want to add a text content area over the background so that it moves with it upon resizing. What's the best way to do so? I am installing a CSS Theme on wordpress...and modified the theme in FireFox...now the theme will not show up at all in ie7, 6 or 5.5...I must be doing something wrong... The wordpress blog is at cattyshackcreations.com/thebuzz ***SHOWS UP GREAT IN FIREFOX BUT NOT AT ALL IN IE*** the css is located at cattyshackcreations.com/thebuzz/wp-content/themes/pink-4-october/style.css the theme originally had a seperate style sheet for ie6...maybe I need to correct something here...not real sure... cattyshackcreations.com/thebuzz/wp-content/themes/pink-4-october/ie6.css any help would be appreciated... Hi, my site is not showing properly in IE, but looks great in Firefox, I know it is the floats, but why I don't know since I cleared them both This is my doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> here is the code I am using in the php page <? include ("header.txt"); ?> <div id="page"> <div id="headerimg"> </div> <div id="topbar"> </div> <div id="content"> <table summary="main content" width="90%"><tr><td> <p align="justify"><span>Welcome to Call Me Farms, your first choice in breeding for Australian Cattle dogs, Border Collies, and Rat Terriers. Located in Parrish, Florida, Call Me Farms takes pride in bringing you the very best there is to offer in these breeds.</span></p> <p align="justify"><span>Here at Call Me Farms we breed for Ability, Beauty, Brawn. My dogs are tested-OFA Hips, Elbows, Prcd and we have a lot of proven finished Champions that are my best buds. My dogs are in all kinds of venues-agility-herding-flyball-protection-conformation and just being a good dog and your best friend. We have produced five generations of Champions and over 34 home bred Champions. I say it's a good start.</span></p> <p align="justify"><span>Here in our site you will find all the information you will need about our breeds, from confirmation through companionship. There are all the latest updates on how well my dogs are doing in competitions, as well as when the puppies are available. Photos of my dogs abound so you can see how beautiful and well bred they are. There is also a page on my foundation dogs, which started it all.</span></p> <div id="currentevents"> </div> <div style="height: 350px; width: 500px; overflow: auto"> <!--UPDATES BEGIN HERE--> <? include ("update.txt"); ?> <!--UPDATES END HERE--> </div> <div id="publications"> </div> <div align="center"> <p align="justify">These are just some of the publications our dogs have appeared in. They have also appeared in numerous calendars, greeting cards, note cards, stationary, and more!</p> <br /> <br /> <img src="images/books.jpg" alt="Publications" width="500" height="100" /><br /> <br /> <br /> <br /> <? include ("footer.txt"); ?> <br /> </div> </td></tr></table> </div> <div id="sidebar"> <div align="center"> <? include ("menu.txt"); ?> <br /> <br /> <table summary="Recommend Us" class="textbox1" width="200" align="center"> <tr> <td valign="top" class="textboxheader"> <div align="center"> Recommend Us </div> </td> </tr> <tr> <td> <div align="center"> <br /> <form method="post" action="cgi-bin/recommend.cgi"> <small>Friends Name:</small><br /> <input type="text" name="recipient_name" size="15" class="input" /><br /> <small>Friends Email Address:</small><br /> <input type="text" name="recipient_email" size="15" class="input" /><br /> <small>Your Name:</small><br /> <input type="text" name="sender_name" size="15" class="input" /><br /> <small>Your Email Address:</small><br /> <input type="text" name="sender_email" size="15" class="input" /><br /> <br /> <input size="1" type="submit" class="button" value="Submit" /> </form> </div> </td> </tr> </table> <br /> <br /> <small>last updated<br /> <script type="text/javascript" language="JavaScript" src="java/update.js"> </script> </small> <br /> <br /> <!--HIDDEN LINKS REQUIRED FOR COUNTER--> <a href="(URL address blocked: See forum rules)"></a><a href="(URL address blocked: See forum rules)"></a> <!--END HIDDEN LINKS FOR COUNTER--> <a href="(URL address blocked: See forum rules)"><img border="0" src="(URL address blocked: See forum rules)=1308498&c=3925807" alt="Website Visitor Counter" /></a><br /> <small>visitors</small> </div> </div> <div class="clear"> </div> <div id="footer"> </div> </div> </body> </html> and here is the css /* CSS Document */ /* basic elements */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #545838; background-color: #e9ebdc; background-image: url(images/bg.jpg); margin-top: 0px; } /* specific divs */ #page { background-color: #fdfdfb; width : 750px; padding : 0; margin : 0 auto; text-align : left; height : auto; border-left : 1px solid #000000; border-right : 1px solid #000000; } #headerimg { background-image : url(images/callmefarms.jpg); margin : 0 auto; width : 750px; height : 280px; padding : 0; } #topbar { background-image : url(images/header1.jpg); margin : 0 auto; width : 750px; height : 85px; padding : 0; } #content { float : left; width : 500px; } #sidebar { float : left; width : 250px; height : auto; padding : 0; } #currentevents { background: #fdfdfb url(images/currentevents.jpg) no-repeat top left; margin-top: 0px; width: 500px; height: 75px; } #publications { background: #fdfdfb url(images/publications.jpg) no-repeat top left; margin-top: 0px; width: 500px; height: 100px; } #footer { background: #a2a876 url(images/footer.jpg); width : 750px; padding : 0; height: 75px; } #resources { background: #e9ebdc url(images/resources.jpg) no-repeat top left; width: 250px; height: 60px; text-align: center; } /* specific classes */ .clear { clear:both; font-size:0; line-height:0px; height:0; } at this point I am totally clueless as to what is the problem here, any help would be most appreciated....thanks!! Hello, Thank you for reading my post This is what I try to create. A Vertical Navigator column with images, without knowing their size, as links and javascript actions. The images should be Horizontally centered. I want to set the width of the div 'navBar' dynamically so that the images inside the 'navElement's grows or shrink but stays in center. The images could be between 55 - 90 pixels width. And I want to have them grow or shrink between 40 - 80 px width. What I already got : The links and javascript actions are working. Also have a column working where the images are centered with a known size, but not working with images without knowing the size. I did try and search for several hours, but couldn't find a good solution. Mainly my question would be, how I can shrink or grow an image without knowing his size. Basicly my html code is Code: <div id="navBar"> <div class="navElement" id="nav1"> <img class="navImg" src="images/home.gif" /> </div> <div class="navElement" id="navN"> <img class="navImg" src="images/notHome.gif" /> </div> </div> my latest css for unknown image size Code: #navBar { /* main page navigation container */
height: 460px;
width: 70px; /* 1. this will be dynamically set */
left: 100px;
top: 151px;
position: absolute;
visibility: visible;
}
.navImg {
height: auto;
width: auto;
/* height: 60px;*/
/*width: inherit;*/
position: relative;
top:0px;
margin:0 auto;
}
#navElement1 {
position: relative;
width: auto;
height: 70Px;
top:0px;
margin:0 3px;
visibility: visible; }
With javascript I add a onclick event handler on each navImg wich trigger the action. This works to. Please, Is someone willing to help with pointers. Thanks in Advance SC Hello guys, I know this is asked several time, but this case is different and can't find a working solution. I'm creating a navbar using ul lists with items as images, and want to center it. I'm using the blueprint css framework, and the list items contains images instead of text. Here's the HTML code : Code: <body> <div class="container"> <div id="header" class="span-24"> <div id="header_wrapper"> <ul> <li><img src="images/nav_03.png" /></li> <li class="selected"><a href="#"><img src="images/nav_04.png" /></a></li> <li><a href="#"><img src="images/nav_05.png" /></a></li> <li><a href="#"><img src="images/nav_06.png" /></a></li> <li><a href="#"><img src="images/nav_07.png" /></a></li> <li><img src="images/nav_08.png" /></li> </ul> </div> </div><!--End Header--> </div> </body> Here's the CSS code : Code:
#header{
padding-top:53px;
border:#F00 solid 1px
}
#header_wrapper ul {
text-align: center;
}
#header_wrapper ul li {
display: inline;
}
I tried many code configurations but can't get it to work! a live preview is available here I'm struggling to find the correct CSS to center a middle column between a left and right column. I need this functionality for a dynamic photo gallery (powered by JS). To put it simply, I need the shaded area to the left and right of an image to expand/contract dynamically based on whether or not the image in the middle is in landscape or portrait format. I've figured out how to hard code it based on orientation, but I need it to be dynamic instead since the JS I'm using isn't aware of the orientation of the image. Examples of what it looks like live are seen below: Portrait Orientation www. notcrappy .com/html/portrait/studio-portraits/index.shtml Landscape Orientation www. notcrappy .com/html/wedding/favorites/index.shtml Here's is some simplified HTML that I'm currently using to present the images and with the left/right blue borders: <div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-left-side"> </div> <div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-middle-position"><img src="images/01.jpg"/></div> <div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-right-side"> </div> And here is the CSS I'm using to give them the correct spacing when the dimension is known. .left-blank-middle-landscape-right-blank-left-side { width: 179px; background-color: #003366; float: left; height: 400px; margin-right: 3px; margin-bottom: 10px; } .left-blank-middle-landscape-right-blank-middle-position { float: left; height: 400px; margin-bottom: 10px; width: 600px; } .left-blank-middle-landscape-right-blank-right-side { width: 179px; background-color: #003366; float: right; height: 400px; margin-left: 3px; margin-bottom: 10px; } .left-blank-middle-portrait-right-blank-left-side { width: 346px; background-color: #003366; float: left; height: 400px; margin-right: 3px; margin-bottom: 10px; } .left-blank-middle-portrait-right-blank-middle-position { float: left; height: 400px; margin-bottom: 10px; width: 266px; } .left-blank-middle-portrait-right-blank-right-side { width: 346px; background-color: #003366; float: right; height: 400px; margin-left: 3px; margin-bottom: 10px; } Can anyone give me any pointers on what I need to do to make the CSS dynamic based on the orientation of the photos? Thanks so much for your help! test link: users.tpg.com.au/tetsuo/CSS_help/index.html Hi guys, Im really new to CSS, and doing a bit of crammed-study on it. I finally found a fix that worked on css list navigation that i could use that'll work in IE but i cant seem to center each menu item to each respective rollover image (the BG gifs). Some help on this would be greatly appreciated, i cant seem to find anything to fix this. I've tried several solutions (which is probably why my css might look like a huge mess). the css file is he users.tpg.com.au/tetsuo/CSS_help/awis.html Delete good evening all, i am new here. tonight i tried to upload a web page that i had already made. i had already seen what it looked like, and the images were displaying just fine, but then when i uploaded the file and viewed it (from the website as opposed to from my hard drive)the images were not showing (except for the first one which was just a test). i don't know why there should be a difference, since the file is exactly the same. any help would be greatly appreciated! thank you. This puzzles me for this is the first time EVER that it is not working. I have "background-image" coding and NONE of those images are even showing up, yet when i add them on the index file as a normal image all is well... Any ideas? I am having a problem with some css image links not showing up in some browsers (IE 7, for example). Seems to work on most Mac browsers (of course!) Any help is appreciated! I've tried a few different things with the code, which explains the few items that are commented out. HTML: <a href="contact-form.php" class="more-info"><img src="images/spacer.gif" width="156" height="79" /></a> <a href="charity.php" class="community"><img src="images/spacer.gif" width="154" height="72" /></a> CSS: a.more-info:link { display:block; overflow:hidden; text-indent:-9999px; width:156px; height:79px; background:url(../images/more-info2.png) no-repeat 0 0; margin:6px 0 0 3px; } a.more-info:hover{ background-position: -156px; } a.community:link{ display:block; overflow:hidden; text-indent:-9999px; width:154px; height:72px; background:url(../images/community.png) no-repeat 0 0; margin:6px 0 0 3px; } a.community:hover{ background-position:-154px; } I will try to explain as simple as I can: I have rollover drop down menus, made with <DIV>'s. Showing and hiding them with JavaScript/CSS, usual stuff... While opening and closing menus, and hovering the menu items, table's bkg images are kind of "blinking". I am using CSS to put bkg image to a cell Code: background-image:url(/burakueda/images/bg_gifs/down_end.gif); . I realized that, browser tries to download bkg images everytime I open a pulldown menu, or hover a menu item. I have other images in same page, inserted with <IMG> tag, they don't have any problem. Anyone knows anything about this? Thanks in advance for any help This problem just started happening, but frustratingly I can't remember what I was changing when it started happening. The problem is that (almost) all the images on the site seem to be "bumped" 1px out of place, with a black border showing on the top and left hand sides of the images. This is not showing up with ALL images, however. I've embedded an image and you can see the effect on the logo, on the graphics in the body text, and on the sub-menu items (with the 'empty' box icons). However the effect does not occur on the menu items with the 'full' box icons. OK, apparently, I CAN'T EMBED AN IMAGE. Or a link to an image. Or a link to the site in question. SO I have no idea how I am actually supposed to get help for this problem. If someone can PSYCHICALLY DEDUCE what the problem might be without being able to view the site or an image of the problem, that'd be ACE! GAAAAH Alright, let's see if we can do this with JUST the CSS & HTML. Here is the CSS: Code:
html {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
}
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
background-image:url('background-index.gif');
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #666666;
min-width: 900px;
min-height: 100%;
}
img {
border:0;
}
a:link {
text-decoration: none;
color: #0096db;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #00abc7;
text-decoration: none;
}
#header {
width:900px;
height:80px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0096db;
}
#logo {
float:left;
width:140px;
margin:0;
padding:0;
}
#head_nav {
width:760px;
position:relative;
float: right;
background-color: #ebf9ff;
height: 80px;
margin:0;
padding:0;
}
#clear_both {
clear:both;
}
#sidenav {
float:left;
width:100px;
padding-left:10px;
padding-top:0;
margin-top:0;
}
#content_wrap {
float:right;
width:760px;
background-color: #ebf9ff;
background-image:url('content-background.gif');
}
#content {
float:left;
width:500px;
}
#content h1, h2, h3, ul {
padding-top: 15px;
padding-left: 15px;
}
#content p {
padding-left: 15px;
}
#focus_box {
width:260px;
float: right;
margin-top:0;
padding-top:0;
}
#focus_box h1 {
padding-top:15px;
}
#focus_box p, h1, ul {
padding-left:15px;
}
table.blue_highlight {
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#0096db;
margin-left:15px;
margin-right:15px;
padding-top:15px;
padding:0;
margin:0;
}
#menu2 {
float: left;
width: 200px;
}
#main {
float: right;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666666;
}
ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666666;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: 700;
color: #0096db;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color:#666666;
font-weight: bold;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: ;
}
/*!!!!!!!!!!! MENU STYLES FOR LEVEL1MENU !!!!!!!!!!!*/
#level1menu {
position:absolute;
bottom:0px;
padding-left:60px;
}
#sitemap li {
margin-left: 15px;
}
#sitemap ul {
margin-bottom:15px;
}
#sitemap ul li ul {
margin-left:15px;
}
And here is the HTML: Code:
<%@ LANGUAGE="VBSCRIPT" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>BB Group Homes</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"(URL address blocked: See forum rules)">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">@import "style.css";</style>
</head>
<body class="developments">
<div id="header">
<div id="logo">
<!--#INCLUDE FILE="logo.asp" -->
</div>
<!--END LOGO-->
<div id="head_nav">
<!-- #INCLUDE FILE="menutop.asp" -->
<!-- END MENU_TOP -->
<div id="level1menu">
<!-- #INCLUDE FILE="level1menu.asp" -->
</div>
<!--END level1menu-->
</div>
<!--END HEADER -->
<div id="clear_both"></div>
<div id="sidenav">
<!-- #INCLUDE FILE="menu_developments.asp" -->
</div>
<div id="content_wrap">
<img src="banner_developments1.png">
<div id="focus_box">
<!-- #INCLUDE FILE="focus_boxes.asp" -->
</div>
<div id="content">
<h1>Developments</h1>
<table class="blue_highlight">
<tr>
<td><a href="golfsociety.asp"><img src="Golf_society_residence_logo.gif"></a></td>
<td><h2>Golf Society Residence</h2>
<p>The Golf society project was initiated for a variety of reasons, some of which include the scenic environmental landscape, increasing trend of Bodrum as a holiday destination for tourists and natives, the beach and the close proximity to the airport.</p>
<p><a href="golfsociety.asp">-> More</a></p></td>
</tr>
</table>
<table class="blue_highlight">
<tr>
<td><a href="thevillage.asp"><img src="thevillagelogo.gif"></a></td>
<td><h2>The Village Bodrum - Tuzla</h2>
<p>You will find everything you have dreamed of at Vita Park Golf Resort, a world-c1*** destination in the heart of the peninsula Bodrum, the famed pearl of the Aegean Sea. </p>
<p><a href="thevillage.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
<td><a href="bluemarina.asp"><img src="bluemarinalogo.gif"></a></td>
<td><h2>Blue Marina Bodrum - Yalikavak</h2>
<p>Blue Marina Apartments, overlooking the spectacular view of Yalıkavak amongst the centeranian olive trees, designed for all year long living, your comfort and every desire is planned to the finest detail.
</p>
<p><a href="bluemarina.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
<td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
<td><h2>Blue Life Bodrum -Yalikavak</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
<td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
<td><h2>Kalkan Luxus Villas</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<p></p>
</div>
</div>
</body>
</html>
</body>
</html>
A lot of the images that are showing the 1px-off problem are contained in the SSIs (I don't think anyone here wants me to post the full content of the SSIs, do they?) but quite a few of the images in the main HTML are, as well: banner_developments1.png & all the logos. This would be a lot easier if I could show you a picture of what was going on. Hi, I had this working but somehow it's not working again. The problem I am having is that scroll bars are showing up in my iframe in Firefox, Opera, and Safari, but not IE7 and IE6. Here is the link: http://www.caillouette.com/NewCatsMeow/ I know I need to tighten up my style sheet, but if someone could tell me how to solve this, I would be very happy. Here's the iframe code in the index page: Code: <div id="bodyInfo"> <iframe name="mainBody" width="770" height="602" src ="body.html" scrollbars="NO" border="0"> </iframe> <!-- end #bodyInfo --></div> Hi there, I am trying to center a div within a div. The container div needs to stretch 100% width. It works in FF, but not IE. Any ideas? This is my code: PHP Code: #top_bar{ background-image: url('img/top_bar.jpg'); height: 54px; font-family: arial; font-size: 14px; color: #ffffff; width: 100%; } #top_bar_content{ padding: 18px 0 10px 0px; width: 870px; margin: 0 auto; position: relative; } |
|||||||