HTML - Website Not Displaying Properly
Hi guys this is my first post here, hope you can help.
I am currently designing a websitefor the company I work for and the first page is almost completed with the exception of a little glitch. When the page first loads there are a few elements that are in the wrong place. Then when the page is refreshed these elements go where they are supposed to be. I have looked through the html and the css and can't find any problem as to why this is happening. I would really appreciate any suggestions as to why this is happening or how to fix it. If you need anything else just let me know and I'll post it. Thank you As you can see here Here is what it should look like but only does after hitting refresh Similar TutorialsAll, i have a minor problem with hyperlinks not displaying properly. In some instances, IE7 does not underline the hyperlink or only partly underlines the link. Please see http://www.tauntonflowershow.co.uk/ and look at the downloads yellow box at the top of the screen. Firefox, Opera etc are all OK. Grateful for any advice you can offer. Hi. I have a question regarding my site. If you click on the link using IE you will see that the images in my tables are cut off on the right, and haven't been scaled at all... In Google Chrome they appear fine. Here is the HTML code snippet: Code: <table> <tbody> -snip- <table> <tr> <td> <div class="large"> <a href="http://picasaweb.google.com/lh/photo/QnqiMcSvmlR_osQplmz-Iw?authkey=Gv1sRgCNbCzI295-KBIg&feat=directlink" target="_blank"> <img class="large" src="http://lh3.ggpht.com/_lPPWxJaDX_0/S1tmkLXjmBI/AAAAAAAAAVA/782xI-SkNVQ/s640/step1-2.jpg" alt="CashCrate offers page." title="CashCrate offers page."> </img> </a> </div> </td> </tr> </table> -snip- </tbody> </table> And here is some css code: Code: div.large { width: 100%; height: 200px; border: none; margin-top:6px; margin-bottom:6px; overflow: auto; } img.large { width: 98%; height-max: 600px; padding: 2px; border: ridge; border-color: #66E066; } I'm wanting to know what I need to add/change to make the images appear right in all browsers(I've only tested in IE and Chrome). If you need any more info about my page, ask . Thanks. Hi everyone! On a site I am making there's a table which -- only in the IE-s including version 7 -- is not properly displayed: the column containing the text is only approx. half filled in width. Most (not to say all) other browsers get this right... Anyone got an idea, why this could be? Thx and best, T Hi, I'm new to HTML. I have not yet started using CSS. I'm just using basic html. I'm having problem creating a nested table as shown in the attachment without using CSS style sheets. I appreciate anyone's suggestions in this. I pasted the code that tried below. <h3> 5) - Nested Table </h3> <table align="left" width="350" bgcolor="#ffff00" border="1"> <tr height="75" align="left"> <td height="100" > </td> <td height="75"> test2 </td> <td height="75"> </td> </tr> <clear="left" /> <tr> <td> <table align="left" bgcolor="f5f5dc" border="1"> <tr> <td width="100%" height="75"> a nested table </td> <td width="100%" height="75"> With this text at the top </td> </tr> <tr> <td width="100%" height="75"> </td> <td width="100%" height="75"> </td> </tr> </table> </td> </tr> <tr height="75" align="left"> <td></td> <td></td> <td></td> </tr> </table> Thanks in advance Hello Gurus, I have a HTML webpage index.html and the expecation is that when user selects from drop drown opton it needs to display a webpage in the iframe underneath the option list. Below is the code snippet. From the code, you will see that it displays all www sites such as google.com, yahoo.com just fine without issues, however the local opel.html is not coming up at all. I am pasting the code of index.html as well as the page that i want to call i.e. opel.html. Pleaes help <!----------------------INDEX.HTML CODE STARTS HERE------------------> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Your Murrieta</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="header"> <div> <table> <h1><a href="#" Style="font-family:Edwardian Script ITC" color="White">Your Murrieta</a></h1> </table></div> <p>Showcase of Your World</p> </div> <!-- start page --> <div id="page"> <div id="pagebg"> <div id="content"> <div class="post"> <form action="" method="post"> <SELECT ONCHANGE="if (window.frames && window.frames.iframes) { window.frames.iframes.location.href = this.options[this.selectedIndex].value; }"> <OPTION VALUE="opel.html">My Home Page <OPTION VALUE="http://www.google.com">My Fmaily <OPTION VALUE="http://www.yahoo.com">My Hobbies <OPTION VALUE="http://www.rediff.com">My Friends </SELECT> <iframe id="theFrame" name="iframes" src="opel.html" align="top" height="1460" width="1760"></iframe> </form> </div> <!-- start content --> <!--aaa--> </div> </div> <!--content--> <!-- end content --> <!-- start sidebar --> <div style="clear: both;"> </div> <!-- end page --> <!-- start footer <!-- end footer --> </body> </html> <!--------------------OPEL.HTML CODE STARTS HERE-------------> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- start page --> <body> <table style="margin-left:0%"> <tr> <td> <!--First Panel --> <div style="font-size:9pt;font-family:Georgia; color:Navy; width:345px; background-image:url(images/gray-gradient.gif); background-repeat:repeat;">ERP</div> <div> <table cellspacing="0" cellpadding="15" width="345px" height="79px" bgcolor="#ffffff" align="left" style="background-image:url(images/cnsl.jpg); background-repeat:repeat;margin-right:1%;"> <tr align ="left" width="400px" > <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/erpoffering.html" id="l16">Offerings</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id145.html" id="l18">Request More Information</a> </li> </ul> </ul> </td> <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="mailto:sales@coexsys.com" id="l17">Email us</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id144.html" id="l18">Contact us</a> </li> </ul> </td> </tr> </table> </div> </td> </body> </html> I have three user input text boxes called; "name", "email" and "phone" and one text field to display that information called; "feedback". When a "Submit" button is clicked, the three text boxes are validated to check that what was typed inside them was OK. I then want to display the Users' name, email and phone number on individual lines in the text field, for example, name on line 1, email on line 2 and phone number on line 3. At the minute when I submit the information only the phone number displays on the first line of the text box. In the text field "feedback"; I know the HTML probably interprets my code as; the name is being replaced by the email and then the email is being replaced by the phone number. Here is the relevant section of my code. function validate(){ if (validateName () && validateEmail() && validateformatNumber()){ var myName=document.survey.visitor.value; document.survey.feedback.value=myName; var myEmail=document.survey.email.value; document.survey.feedback.value=myEmail; var myPhone=document.survey.phone.value; document.survey.feedback.value=myPhone; return true; }else{ return false; }} I think the solution could be something simple but I haven't much of an idea of how to do it. Thanks in advance. It works great in Firefox, IE, and even on my iPhone (Safari), but it's having problems in Chrome and on my friend's Mac (Safari). I have a form with 2 tables inside. The first table is aligned left at 47% of the width. The second table is aligned right at 47% of the width. It should look like this: But instead looks like this in Chrome and Safari...it appears that it's centering both tables instead of aligning them left and right to give 2 separate columns. Any ideas? Here is some of my stripped down code: ----------------------------------- <div id="FormLayer" style="position:absolute; width:680px; height:455px; z-index:3; left: 65px; top: 330px; border:0"> <form action="form.php" method="post" name="orderform" id="orderform"> <input type="hidden" name="recipients" value="email.com"> <input type="hidden" name="required" value="actor:Actor's Name, email:Your Email=confirm:The emails you entered did not match, show:Name of the Show, episode:Your Episode|date:Air Date, character: Character's Name, description: Description of Scenes"> <input type="hidden" name="good_url" value="success.htm"> <table width="47%" align="left" border="0" cellspacing="0" cellpadding="5"> <tr> <td><div align="left" class="style3"> <label for="actor"><span class="style2"> Actor's Name:</span></label> </div> </td> </tr> <tr> <td><input name="actor" type="text" id="actor" size="40" maxlength="50"></td> </tr> <table width="47%" align="right" border="0" cellspacing="0" cellpadding="5"> <tr> <td><div align="left" class="style3"> <label for="character"><span class="style2"> Character's Name:</span></label> </div> </td> </tr> <tr> <td><input name="character" type="text" id="character" size="40" maxlength="50"></td> </tr> </table> </form> I'm trying to make a sidebar to navigate through the website and basically lays out the entire site on the sidebar (which is a tree with nodes and leafs etc), but when it tries to display the text, it gets really squished up on the right side, but there are still horizontal scrollbars -.- This is the html after all the PHP stuff: Edit: I put in "width:100em;" in the li section of css. It formatted the text properly, but then the scrollbar continues on forever. Is there any way to find out how many pixels are needed to format the text properly? More specifically, is there any way (javascript, php) to find the length of a string in pixels? HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div#navigation").height(window.innerHeight-16); }); </script> <!--<link type="text/css" rel="stylesheet" href="Styles.css" />--> <style type="text/css"> #navigation { position:absolute; width:25%; height:500px; background-color:#C0C0C0; margin:0px; border:0px; padding:0px; float:left; overflow:scroll; overflow-x:scroll; overflow-y:scroll; } #main { width:75%; height:100%; } li { overflow:visible; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled</title> </head> <!--Use a tree for this--> <div id="navigation" > <ul><li>FoodFoodFoodFoodFoodFoodFoodFoodFoodFoodFoodFoodFo</li> <ul><li>FruitFruitFruitFruitFruitFruitFruitFruitFruitFruit (Level 2)</li> <ul><li>RedRedRedRedRedRedRedRedRedRedRedRedRedRedRedRedRe (Level 3)</li> <ul><li>CherryCherryCherryCherryCherryCherryCherryCherryCh (Level 4)</li> <li>StrawberryStrawberryStrawberryStrawberryStrawberry (Level 4)</li> <ul><li>Uber BerryUber BerryUber BerryUber BerryUber Berry (Level 5)</li> <ul><li>Extreme StrawberryExtreme StrawberryExtreme Strawb (Level 6)</li> <ul><li>WOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWO (Level 7)</li> <ul><li>supercalifragilisticexpialadocioussupercalifragi i (Level 8)</li> </ul></ul></ul></ul></ul><li>YellowYellowYellowYellowYellowYellowYellowYellowYe (Level 3)</li> <ul><li>BananaBananaBananaBananaBananaBananaBananaBananaBa (Level 4)</li> </ul></ul><li>MeatMeatMeatMeatMeatMeatMeatMeatMeatMeatMeatMeatMe (Level 2)</li> <ul><li>BeefBeefBeefBeefBeefBeefBeefBeefBeefBeefBeefBeefBe (Level 3)</li> <li>PorkPorkPorkPorkPorkPorkPorkPorkPorkPorkPorkPorkPo (Level 3)</li> </ul></ul></ul></div> </html> I've spent almost a week designing, coding and uploading this site. Only to have it not display properly in firefox or safari. I've included a link to the site and several screenshots as well as the source code. Please help! This image shows it as it is int ie 7 on windows xp http://img.photobucket.com/albums/v6...asintended.jpg this image shows it on safari and fire fox: http://img.photobucket.com/albums/v6...art/safari.jpg website link: www.tavasystems.com Thanks in advance. I'm trying to design a website for my self and I have a problem. My default browser is Safari so I didn't notice the problem till now. I designed the site layout in photoshop and the site in dreamweaver and it works fine in IE and Safari but in Firefox the site layout gets split at the top of the page and you can see the background in a line. Now the layout has two CSS styles for content in the middle and sidebar on the left both have background color that matches the design #333 and #646464. These are noticeable in the split. The site is sv-photography.net Any one got any ideas on how to fix this? SebastjanV Hi, I've just finished creating the layout for my website. I was just wondering if anyone could tell me why my text does not fit in the boxes that I have created using layers while in Internet Explorer it seems to work fine. Here is the link: http://www.geocities.com/seto.chaos/ And here is the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Welcome to Gameplatforms</title> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> <style type="text/css"> <!-- body { margin-top: 0px; margin-bottom: 0px; } --> </style></head> <body bgcolor="black" body link="yellow" vlink="purple" alink="red"> <div id="Layer5" style="position:absolute; background-color:#666666; left:10px; top:176px; width:211px; height:667px; z-index:5"><font size="2" face="Arial" color="Yellow"> </font> <div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:100px; width:185px; height:48px; z-index:4"> <div id="Layer4" style="position:absolute; left:31px; top:6px; width:86px; height:36px; z-index:4"> <p><font color="Yellow" size="6" face="Arial"><font color="Yellow"></font> <a href="Reviews%20Page.htm">Reviews</a></font> </font></p> </div> <p><font color="Yellow" size="2" face="Arial"><br> <br> </font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:170px; width:185px; height:48px; z-index:4"> <div id="Layer4" style="position:absolute; left:44px; top:6px; width:86px; height:36px; z-index:4"> <p><font color="Yellow" size="6" face="Arial"><font color="Yellow"></font><a href="http://gameplatforms.proboards62.com">Forum</a></font> </p> </div> <p><font color="Yellow" size="2" face="Arial"><br> <br> </font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:240px; width:185px; height:48px; z-index:4"> <div id="Layer4" style="position:absolute; left:44px; top:6px; width:86px; height:36px; z-index:4"> <p><font color="Yellow" size="6" face="Arial"><a href="Videos%20Page.htm">Videos</a></font></p> </div> <p><font color="Yellow" size="2" face="Arial"><br> <br> </font></p> </div> <font size="2" face="Arial" color="Yellow"> <div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:31px; width:185px; height:48px; z-index:4"> <div id="Layer4" style="position:absolute; left:50px; top:7px; width:86px; height:36px; z-index:4"> <p><font color="Yellow" size="6" face="Arial"><a href="News%20Page.htm"> News</a></font></p> </div> <p><br> <font color="Yellow" size="4" face="Arial"><br> </font></p> </div> </font></div> <font size="2" face="Arial" color="Yellow"> <div id="Layer4" style="position:absolute; left:144px; top:143px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial"> <a href="News%20Page.htm"> News </a></font></div> <div id="Layer3" style="position:absolute; left:10px; top:141px; width:1108px; height:26px; background-color:#666666; z-index:3"><font size="2" face="Arial" color="Yellow"> <div id="Layer4" style="position:absolute; left:440px; top:2px; width:6px; height:16px; z-index:4"><font color="Yellow" size="4" face="Arial"> <a href="Reviews%20Page.htm"> Reviews </a></font></div> </font> <div id="Layer4" style="position:absolute; left:687px; top:2px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial"><a href="http://gameplatforms.proboards62.com">Forum</a></font></div> <font size="2" face="Arial" color="Yellow"> <div id="Layer4" style="position:absolute; left:916px; top:2px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial"> <a href="Videos%20Page.htm"> Videos </a></font></div> </font></div> <div id="Layer1" style="position:absolute; left:10px; top:14px; width:1108px; height:884px; z-index:1"> <p> </p> <p> </p> <p> </p> <p><br> </p> <p><br> </p> <div id="Layer3" style="position:absolute; left:0px; top:841px; width:1108px; height:40px; background-color:#666666; z-index:3"><font size="2" face="Arial" color="Yellow"> <div id="Layer4" style="position:absolute; background-color:#999999; left:9px; top:9px; width:1090px; height:24px; z-index:4"> <p><font color="Yellow" size="2" face="Arial">Contact us: <a href="mailto:kaibachaoschampion@gmail.com">Email:</a> <a href="mailto:kaibachaoschampion@gmail.com">kaibachaoschampion@gmail.com</a></font></p> </div> </font> </div> <div id="Layer5" style="position:absolute; background-color:#666666; left:948px; top:162px; width:160px; height:667px; z-index:5"><a href="http://www.play-asia.com/SOap-23-83-19kw-49-en.html"> </a> <a href="http://www.play-asia.com/SOap-23-83-19kw-49-en.html"><img src="http://www.play-asia.com/paOS-32-74-z.html" border=0 alt="Play-Asia.com - Buy Video Games for Consoles and PC - From Japan, Korea and other Regions!" width="160" height="600"></a> </div> <div id="Layer5" style="position:absolute; background-color:#666666; left:251px; top:162px; width:666px; height:667px; z-index:5"> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:110px; width:607px; height:87px; z-index:4"> <p><font size="2" face="Arial" color="Yellow">Text text text text text text text text text text text </font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:210px; width:607px; height:72px; z-index:4"> <p><font color="Yellow" size="6" face="Arial"> Title</font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:290px; width:607px; height:153px; z-index:4"> <p><font color="Yellow" size="2" face="Arial">Text text text text text text text text text text text</font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:30px; width:607px; height:71px; z-index:4"> <p><font color="Yellow" size="6" face="Arial">Title</font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:450px; width:607px; height:72px; z-index:4"> <p><font color="Yellow" size="6" face="Arial">Title</font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:530px; width:607px; height:119px; z-index:4"> <p><font color="Yellow" size="2" face="Arial">Text text text text text text text text text text text text text </font></p> </div> <font size="2" face="Arial" color="Yellow"></font></div> <p><br> </p> </div> <div id="Layer2" style="position:absolute; left:162px; top:14px; width:667px; height:123px; z-index:2"><img src="http://i5.photobucket.com/albums/y157/kaibachaoschampion/Logo.png" width="800" height="125"></div> </font> </body> </html> Thanks I am having problems with my website http://www.cheapwedding.co.nz - menu on the left side seems to misbehave... It's kinda "jumping", i.e. sometimes it shows the way it should (words do not wrap) and sometimes the words wrap and it doesn't look nice.... when I refresh the page it sometimes fixes the problem, but it's not the solution. Please let me know what the problem is and how to fix it. Thanks in advance for your help! P.S. I am using Firefox 3, and my webpages are made of included php files (header, footer, left menu, top menu, right side, etc.) http://goldenworldgoods.awardspace.com/ Hello again, I did this site in Dreamweaver, looked fine in my dreamweaver editor, uploaded it and voila everything goes nuts. List of Problems: The Links are not positioned properly, not big enough plus the drop downs to the bottom and not to the right. That was properly my fault since I just copied a suckerfish method... But can someone help with this. If you study the News Header in the CSS, it says it has a background image, how ever it doesn't show when I uploaded it. I know the url and the pic is correct cause it worked in Dreamweaver... The background for "welcome" is all the way up there which isn't supposed to happen, it supposed to be right on top of the Hello text but that isn't happening either. The hello and welcome are supposed to be aligned to the left of the right header. Thats about it, please can someone help me. I've changed the format of this like 3 times just to get it correctly done, but nothings working. Thank you And don't worry I got it all validated and what not Hello, my name is North, and my website is not displaying correctly in IE. I am putting this here because my website is build with php, but the actual content on the pages are html, so i thought that this would be the place. http://north-see.com/judge/index.php?pid=0 this is the link to the site. I am making it for a persons book. Any ideas? Any common things that happen like this in IE? Is it easy to do this? Basically I was thinking that my forum could be shown on someone else's site, but only certain parts of it. my host doesn't allow remote database connections so it's not possible to have a different forum accessing the same database. What difficulties would I encounter trying to do this? Hello. I have created a website: www.launchtechusa.com It looks fine when you view it through mozilla or safari, but it gets distorted when you view it through internet explorer. Any reasons why this may be happening? Thanks for any pointers you can give! I am experiencing frustration due to the website that I've designed is being displayed perfectly in the Explorer browser, but in Firefox its all screwed up. Is it coding issues? My website is at www.wolfdenexpeditions.ca cheers could someone have a look at a site that I am working on... http://benjaminpotter.org/stpauls/ and tell me how come in IE the picture box moves off to the right... it has stumped me! hey everyone...I saw that you helped hasanoca,so I need same help.My site works in Safari,GGL Chrome and opera,but IE and mozilla won't open it right...everything is mixed up...so here is my site: Quote: *{ margin:0px auto; padding:0px; } body{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#FFD68F; text-align:justify; background:url(../images/bg.JPG) left top repeat; } b{ color:#fff; text-decoration:underline; } strong{ color:#FEE9C4;} h1{ font-size:21px; font-weight:bold; color:#fff; margin:0px; padding:0px; } .clear{ clear:both; margin:0px; padding:0px; } .conten_area{ width:803px; margin:0px auto; padding:0px 0px 0px 200px; } .sub_menu{ width:150px; float:right; margin:0px; padding:35px 0px 7px 0px; font-weight:bold; } .sub_menu a{ text-decoration:none; color:#fff; } .sub_menu a:hover{ text-decoration:none; color:#fff; } .sub_menu a.active { color:#f9be58; text-decoration:none; } .workzone{ width:604px; float:left; padding:0px 0px 50px 0px; margin:0px 0px 0px 0px; } .header{ width:237px; float:left; margin:0px 0px 0px 0px; padding:357px 33px 0px 334px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; background-position: 0px 0px; } .menu_heading{ text-align:right; margin:0px; padding:0px 0px 0px 0px; } .menu{ width:140px; float:right; font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; margin:0px; padding:10px 0px 0px 0px; } .menu ul{ margin:0px; padding:0px; } .menu li{ list-style-type:none; margin:0px; text-align:right; padding:5px 20px 0px 0px; background-image: url(../images/bullet.GIF); background-repeat: no-repeat; background-position: right 10px; } .menu li a{ text-decoration:none; color:#fff; } .menu li a:hover{ text-decoration:none; color:#fff; } /* content master */ .content{ width:556px; float:left; padding:0px 24px 45px 24px; margin:0px; background: url(../images/content_bg.jpg) left bottom no-repeat; } /* welcome */ .welcome{ width:556px; float:left; margin:15px 0px 0px 0px; padding:0px 0px 0px 0px; } .welocme_heading{ width:505px; float:left; font-size:21px; font-weight:bold; color:#7C150A; margin:0px; padding:0px 27px 11px 24px; } .welcome_top{ width:556px; height:20px; float:left; margin:0px; padding:0px; background-image: url(../images/welcome_top.jpg); background-repeat: no-repeat; background-position: 0px 0px; } .welcome_content{ width:505px; margin:0px; padding:0px 27px 0px 24px; background-image: url(../images/welcome_bg.jpg); background-repeat: repeat-y; background-position: 0px 0px; text-align:justify; } .welcome_bottom{ width:556px; height:20px; float:left; margin:0px; padding:0px; background-image: url(../images/welcome_bottom.jpg); background-repeat: no-repeat; background-position: 0px 0px; } /* services */ .services{ width:556px; float:left; margin:15px 0px 0px 0px; padding:0px 0px 0px 0px; } .services_heading{ width:505px; float:left; font-size:21px; font-weight:bold; color:#000; margin:0px; padding:0px 27px 11px 24px; } .services_top{ width:556px; height:20px; float:left; margin:0px; padding:0px; background-image: url(../images/services_top.jpg); background-repeat: no-repeat; background-position: 0px 0px; } .services_content{ width:505px; margin:0px; padding:0px 27px 0px 24px; background-image: url(../images/services_bg.jpg); background-repeat: repeat-y; background-position: 0px 0px; } /* services category */ .web_design{ width:149px; float:left; margin:0px; padding:0px 12px 0px 0px; border-right:1px dotted #FEE9C4; } .web_design_heading{ width:113px; float:left; font-size:11px; font-weight:bold; margin:0px; padding:6px 0px 9px 36px; background-image: url(../images/img.jpg); background-repeat: no-repeat; background-position: left 0px; } .web_design_content{ width:149px; float:left; margin:0px; padding:5px 0px 0px 0px; } /* logo category */ .logo_design{ width:149px; float:left; margin:0px; padding:0px 12px 0px 16px; border-right:1px dotted #FEE9C4; } .logo_design_heading{ width:113px; float:left; font-size:11px; font-weight:bold; margin:0px; padding:6px 0px 9px 36px; background-image: url(../images/img2.jpg); background-repeat: no-repeat; background-position: left 0px; } .logo_design_content{ width:149px; float:left; margin:0px; padding:5px 0px 0px 0px; } /* icon category */ .icon_design{ width:149px; float:left; margin:0px; padding:0px 0px 0px 16px; } .icon_design_heading{ width:113px; float:left; font-size:11px; font-weight:bold; margin:0px; padding:6px 0px 9px 36px; background-image: url(../images/img3.jpg); background-repeat: no-repeat; background-position: left 0px; } .icon_design_content{ width:149px; float:left; margin:0px; padding:5px 0px 0px 0px; } .services_bottom{ width:556px; height:20px; float:left; margin:0px; padding:0px; background-image: url(../images/services_bottom.jpg); background-repeat: no-repeat; background-position: 0px 0px; } /* our client */ .our_client{ width:556px; float:left; margin:15px 0px 0px 0px; padding:0px 0px 0px 0px; } .our_client_heading{ width:505px; float:left; margin:0px; font-size:21px; font-weight:bold; color:#7B3903; padding:0px 27px 11px 24px; } .our_client_top{ width:556px; height:20px; float:left; margin:0px; padding:0px; background-image: url(../images/client_top.jpg); background-repeat: no-repeat; background-position: 0px 0px; } .our_client_content{ width:298px; height:194px; margin:0px; padding:25px 234px 49px 24px; background-image: url(../images/client_content.gif); background-repeat: repeat-y; background-position: 0px 0px; text-align:justify; } .our_client_list{ width:270px; float:left; margin:0px; padding:10px 0px 0px 0px; } .our_client_list ul{ margin:0px; padding:0px 0px 0px 15px; } .our_client_list li{ list-style-type:disc; margin:0px; padding:4px 0px 0px 0px; } .our_client_list li a{ text-decoration:underline; color:#FFEFD2; } .our_client_list li a:hover{ text-decoration:none; color:#FFEFD2; } .our_client_bottom{ width:556px; height:20px; float:left; margin:0px; padding:0px; background-image: url(../images/client_bottom.jpg); background-repeat: no-repeat; background-position: 0px 0px; } /* footer */ .footer{ width:604x; padding:20px 0px 0px 0px; margin:0px 0px 0px 0px; } .footer_menu{ width:604px; float:left; text-align:center; color:#F3E8D2; text-transform:uppercase; background:#333; } .footer_menu ul { margin:0px; padding:0px; } .footer_menu li { display:inline; list-style-type:none; margin:0px; border-right:1px solid #ffe1ad; padding:0px 5px 0px 5px; } .footer_menu li a{ text-decoration:none; color:#F3E8D2;} .footer_menu li a:hover{ text-decoration:none; color:#F3E8D2;} /* link */ a { color:#ffffff; text-decoration:underline; } a:hover { text-decoration:none; } p a{ text-decoration:none; color:#fff; float:right;} p a:hover{ text-decoration:none; color:#fff; float:right} /* Inside Style Start Here */ .insidebanner { height:332px; background:url(../images/insidebanner.jpg) left top no-repeat; } h5 { font:15px Myriad Pro, Arial, Helvetica, sans-serif; color:#ffffff; font-weight:100; padding:0px 0px 5px 0px; border-bottom:1px dotted #ffffff; margin:0px 0px 10px 0px; } h6 { font:17px Myriad Pro, Arial, Helvetica, sans-serif; color:#ffffff; font-weight:100; padding:0px 0px 5px 0px; margin:0px 0px 10px 0px; } .ourvalue { margin:10px 0px 0px 0px; } .aboutus-img { float:right; border:4px solid #b0a48b; margin:0px 0px 10px 20px; } .aboutcolumnzone { padding:20px 0px 16px 0px; } .aboutcolumn1 { width:48%; float:left; margin:0px 0px 10px 0px; } .aboutcolumn2 { width:48%; float:right; margin:0px 0px 10px 0px; } .abouticon { float:left; margin:0px 20px 0px 0px; } .servicecolumnzone { padding:20px 0px 16px 0px; } .servicecolumn1 { width:48%; float:left; margin:0px 0px 10px 0px; } .servicecolumn2 { width:48%; float:right; margin:0px 0px 10px 0px; } .our-comment { margin:10px 0px 0px 0px; } .blog-posted-row { padding:3px; } .ourprojectrow { margin-bottom:20px; border-bottom:1px dotted #000000; padding-bottom:10px; } .project-img { float:right; margin-left:20px; border: 6px solid #b0a48b; } input.button { color:#ffffff; background:#414141; font:bold 11px Arial, Helvetica, sans-serif; text-decoration:none; padding:10px 10px; margin:0px 5px 5px 0; border:1px solid #000000; } input.button:hover { cursor:pointer; color:#cccccc; } .insidereadmore { padding:10px 0px 10px 0px; } /* Inside Style End Here */ |