|
HTML - Nested Div Won't Behave In Firefox - Help
Hi
I have a main div called wrapper - it holds the main content of my site. It has a thin border around it. In Firefox, it just appears as a thick horizontal line, and it's contents appear underneath it. I have checked the nestings, and they all seem right - in other words, this DIV definitely contains content, and it shows in IE, just not Firefox. If I type text next to <div id="wrapper">, it appears in the wrapper div, and pushes the rest of the content down the page. I don't get it. The code says the content is in the div, but it's not. HELP!!! Cheers Shaun Similar TutorialsHi I need help in tables with 100%. Actually i am keeping a table with 100% fihed width in a <td>, but when i am minimising the IE or Firefox browser the columns are reducing , how to solve the problem I'm having some trouble getting my layout to work. I want a certain group of divs to behave like a table row, i.e if one of the cell/div has content longer than the other divs, all the other divs should reflect the same height. I tried using the display method, but couldn't wrap my head around how to work it and heard it wasn't cross browser compatible. I'm tempted to just use a table, but want to follow W3C guidelines. Does anyone have any suggestions? you have 3 floating divs. "bottom" "top" and "middle". "top" is inside of "bottom" --> in this scenario, can "middle" div ever be above "bottom" div, but below "top" without being inside of "bottom" div? Code: <div id="bottom" style="position:absolute; top:100px; left:100px; width:200px; height:100px; z-index:1; background-color:#F00;"><h1>bottom</h1> <div id="top" style="position:absolute; top:100px; left:150px; width:200px; height:100px; z-index:3; background-color:#00F;"><h1>top</h1></div> </div> <div id="middle" style="position:absolute; top:150px; left:150px; width:200px; height:100px; z-index:2; background-color:#0F0;"><h1>middle</h1></div> Hi. I need to find a way of displaying some thumbnail photos in a table cell across a bunch of different tempates. I put a new thumbnail in the group about once a week, but I dont want to edit every template I have. Is is possible to have code in the table cell that say's get thumbnails.htm and put them in this cell That way I can just edit thumbnails.htm and it will show up on all the templatess/pages I'm sure it can be done, but I'm not sure how to go about it. Thanks Leroy Hi, I am using CSS with nested tables. There are two <td> fields in the innermost table, and are having links inside them. When I open the page in IE, and move the mouse over to the first cell, the whole cell becomes active. But the second cell becomes active only if I take the mouse on the text. Why this inconsistency? Can anyone help? Thanks. Please refer attached html and css files I have the html code: <div style="width: 100%; height:100%; background-color: orange;"><input type="text" style="border-style: solid;border-width: 1px;border-color:black;"/></div> In IE7 the input will start one pixel below the div, in Firefox it displays well. How can I get rid of the 1px in IE7 ? Hello, I am new here and hope someone can help. I am creating a page where I need to have several nested lists. The 'numbering' is showing up correctly but the 'nested' lists are not indented. Can anyone take a look at the page and my source code and see if you can help me figure out what is wrong? go to http://www.prewrath.com/index2.html Thank you! bzig I am currently trying to create some nested lists to display the following... A...R...X B...S...Y C...T...Z (where the letters will eventually be replaced by words) and have made this work perfectly in chrome and firefox, however when I use Internet Explorer I get something resembling the following... A B...R C...S...X .....T...Y ..........Z I assume it's probably to do with the css, but please can someone help me with this problem, the html and css are shown below, thanks in advance for any help. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel=stylesheet href="links.css" type="text/css"> </head> <body> <div id="container"> <ul id="links-nav"> <li> <ul> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </li> <li> <ul> <li><a href="#">R</a></li> <li><a href="#">S</a></li> <li><a href="#">T</a></li> </ul> </li> <li> <ul> <li><a href="#">X</a></li> <li><a href="#">Y</a></li> <li><a href="#">Z</a></li> </ul> </li> </ul> <div class="clear"></div> </div> </body> </html> CSS Code: #container{
width:960px;
margin:0px auto;
border: 1px solid #000;
padding:20px 10px;
height:auto;
font-family: Arial, sans-serif;
font-size:11px;
}
.clear {
clear: both;
height: 0;
overflow: hidden;
}
a{
text-decoration:none;
color:#555;
}
#links-nav li, li ul li{
list-style:none;
}
#links-nav{
display:inline;
margin:0;
padding:0;
}
#links-nav li ul{
float:left;
padding:0;
width:168px;
padding: 0px 10px;
}
I am having a problem that I can not figure out why this is happening. I have two divs one named content and one named welcome. The welcome div is nested inside the content div. Whenever I change the margin top for the welcome div it also changes the margin top of the content div it is nested in. How can I keep it where the content div is fixed and doesn't move no matter where I set the margin top for the welcome div? Here is the HTML.... Code: <div id="content">
<div class="welcome">
<p> Coming Soon, a new and improved Texas Camping Forum for Fall 2008!!!<br>
Bookmark us and check back often....</p>
</div>
</div>
Here is the CSS... Code: #content {
margin: 5px 0 0 140px;
text-align: center;
width: 630px;
border-left: 1px solid #F4F4F4;
}
.welcome {
margin-top: 25px;
}
Here is the link to the site.... http://development.mesquitechristmas.com/index.html Any ideas or suggestions as why this is happening? -Thanks Hello guys, I want to create a page with nested html tables. I have attached an image of exactly what I want. Can you please help me with that? Here's my problem... I'm using two blockquote tags to style my BBCode quote tags for my site. However, whenever I post something that's longer than, say, a line in a quote tag, it moves the sidebar div down below the main div. Only in IE though. Typical. http://automata.firephoenixnet.com/test.html I tried using divs instead - didn't work. I even tried using spans - but they didn't work the way I wanted them to. Can anyone help me with this? Thanks in advance guys. I have various div's inside a wrapper div (#wrapper). I have set the width of wrapper div to 900px and one of the inside div (#content) to 650px. but the inner div is not getting shrinked to 650px. I am using dreamweaver and eric mayer reset before applying my custom CSS. Here is the code: HTML Code: Code: <!DOCTYPE html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen>
<title>Shears Design Website</title>
</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="shears-logo">
<img src="images/logos/ShearsDesign.jpg"/>
</div>
<div id="top-nav">
<ul>
<li> <a href="index.html">Home</a></li>
<li> <a href="about.html">About</a></li>
<li> <a href="courses.html">Courses</a></li>
<li> <a href="tutorial.html">Tutorial</a></li>
<li> <a href="contact.html">Contact Us</a></li>
<li> <a href="imp-links.html">Important Links</a></li>
</ul>
</div>
<div id="content">
<h1> About Shears Design</h1>
<p> Shears Design is a small web design and training studio. We have worked as a freelance designer since 2006 and have been creating websites since then.Thewebsites we design have a clean professional layout and appearance with easy to understand navigation and clean, easy to read typography so your site visitors find what they are looking for and have a positive experience visiting your site. We believe in using straightforward well tested design methods which produce sites that are pleasant to visit and easy to maintain and expand when the time comes. Our websites are based on a standard layout grid which gives our clients the ability to visualize their sites in an organized way and provides a framework to quickly and efficiently create dependable and clean websites.</p>
</div>
<div id="right-side">
<h2> Learning resources </h2>
<p> For more learning resources, please refere the tutorial link at the top of the page. </p>
<h3> Shears Design Frameswork </h3>
<p> This is the framework we use to create websites in the training videos for Adobe Dreamwewaver, Microsoft Expression Web and the learning HTML and CSS courses. It includes the completed project templates created in the videos. The purpose of this framework is to provide you with a starting set of tools for creating websites, which you can customized to fit your needs and style. Its the toolkit we use everyday when creating websites. It works great for us and we hope it can be the start of something great for you. </p>
<p> <a href="contact.html"> Contact us for more information </a> <p>
<h3> Small Business SEO Guide </h3>
<p> SEO Guide will go over what SEO is, Keyword Research, External Link Building and OnPage Optimization techniques as well as a discussion of "Black Hat" techniques to avoid. The guide will conclude with information on adding your site to Google and Bing, working with XML sitemaps and installing Google Analytics. The videos will demonstrate the On Page SEO Techniques discussed in the guide and the procedure for adding your site to Google and Bing, creating search engine site maps and adding Google Analytics to your site.</p>
<p> <a href="contact.html"> Contact us for more information </a> <p>
</div>
<div id="social-media-icons">
<ul>
<li> <a href="http://www.facebook.com"> <img src="images/logos/facebook-64x64.png"/> </a> </li>
<li> <a href="http://www.twitter.com"> <img src="images/logos/twitter-64x64.png"/> </a> </li>
<li> <a href="https://plus.google.com"> <img src="images/logos/google-64x64.png"/> </a> </li>
<li> <a href="http://www.youtube.com"> <img src="images/logos/youtube-64x64.png"/> </a> </li>
<li> <a href="http://www.yahoo.com"> <img src="images/logos/yahoo-64x64.png"/> </a> </li>
</ul>
</div>
<div id="footer">
<p> ©2011 Shears Design | All Rights Reserved </p>
<p> Terms and Conditions </p>
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------- CSS code: Code: /* Reset */
html, body { margin: 0; padding: 0; border: 0; background: transparent; font-size:10px; }
div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li,
table, tr, th, td, tbody, tfoot, thead {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
img { margin:0; padding:0; border:0; }
table, tr, th, td, tbody, tfoot, thead {
margin: 0; padding: 0; border: 0;
vertical-align: baseline;
background: transparent;
}
table { border-collapse: collapse; border-spacing: 0; }
input, select, textarea, form, fieldset {
margin: 0; padding: 0; border: 0;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display:block; }
h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, b, i, u, strike {
font-family: Arial, Helvetica, sans-serif;
font-size:100%;
font-weight: normal;
font-style: normal;
line-height: 100%;
text-indent: 0;
text-decoration: none;
text-align: left;
color: #000;
}
ol, ul { list-style: none; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
h1 { font-size:24px; color:#3CF;
padding-bottom:15px; border-bottom:1px #ccc solid; margin-bottom:15px; }
h2 { font-size:20px; }
h3 { font-size:16px; margin-bottom:5px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }
/* Text Elements */
p { color:#000; font-size:12px; line-height:150%;
margin:15px 0; }
a { }
a:link { color: #00f; }
a:visited { color: #0f0; }
a:active { color: #000; }
a:focus { color: #666; }
a:hover { color: #f00; }
/*id styles*/
body {background-color:#D1F4FC; }
#wrapper {width:900px; margin:0px auto; background-color:#FFF;}
#shears-logo {padding-top:20px; float:left;
margin-bottom:20px;}
#top-nav { clear:both;
}
#top-nav ul li a {text-decoration:none;}
#top-nav ul li {display:inline;
}
#content { width:650; margin:10px; float:left;}
Hello, Can anybody help me out? I have a nested table as such: =========================================== <table cellspacing="0" cellpadding="3" border="1"> <tr> <td>Joe <table> <tr> <td>A </td> </tr> </table> </td> </tr> </table> =========================================== How can I get "Joe" and "A" on the same line without changing the table structure? (Can't change structure cuz this is how my server side code spits it out. But I can add styles and attributes.) I've tried all manner of floating, margins, padding, aligning, hspacing, vspacing, and nothing seems to work. Thanks for any help. I feel really stupid now, I can't figure out how to start a new thread. Please someone help me figure out what is wrong with my nested frames: <html> <head> <title></title> </head> <frameset rows="99%"> <frame src=""/> <frameset cols="20%,80%"> <frame src=""/> <frame src=""/> </frameset> </frameset> </html> They work individually but not collectively. Thanks in advance! I am trying to get three colums of work, picture on the left, text middle, pictures on the right. should I be working with nested tables? attached a pix to show what I mean, Hello, I've been looking at this problem for a few hours now and can't see what i'm doing wrong. I just want to nest 2 tables inside 1 row of another table. Problem can be seen and you can view source at http://www.lakesdt.com/testindex.html Can anyone tell me where i've gone wrong? I'm using Notepad++ so that can confirm all my <tr> and <td>'s seem to match up. Any help much appreciated! Also open to suggestions for a better way to implement this, and also as each link on the left will load a page in the right is there a neater way to do this without reloading the whole page again? Best regards, Matt hi everybody, i have a problem displaying an html page that contains nested tables, all in a div. now the testing page that i present is a simple html, which works just fine in FF, chrome, safari and opera. sadly, it doesnt in IE7 (didnt test other IE versions). the goal is to make the scroll of the div reflect the width of the tables. i dont know what is causing this, maybe there's something missing in my code, or just an IE bug, perhaps... Anyway, i appreciate you reading this and thanks for your help, if any. I am using nested frames on my default page which for the majority of needs works out fine, but I am trying to link to another page I wrote and I don;t know how to to set it so it takes over the entire page and not just in the lower right hand frame. How can I go about doing this? Hi, I've heard it said that using nested Divs is bad practice. Does anyone agree with this? And if so, why? ...just wondering. HH Hi folks, I'm slowly but surely getting the layout sorted of my website with CSS + HTML. Now the layout looks great in Firefox 3.6 but IE 7 doesn't like it at all! Anyway let me describe the scenario to you. I have my CSS like so Code: body {
font-family: Arial, sans-serif;
font-size: 14px;
color: #333333;
background-color: #CCCCCC;
text-align: center;
}
/*************************DIV ID's****************************/
#whiteBox {
margin: 0 auto;
margin-top: 85px;
width: 946px;
height: 666px;
background-color: #FFFFFF;
text-align: left;
font-weight: normal;
}
#logoBox {
position: relative;
width: 641px;
height: 55px;
top: 33px;
left: 277px;
text-align: right;
}
#navBox {
position: relative;
width: 641px;
height: 50px;
top: 28px;
left: 277px;
text-align: right;
}
#leftBody {
position: relative;
width: 241px;
height: 425px;
top: 55px;
left: 22px;
text-align: left;
}
#rightBody {
position: relative;
width: 641px;
height: 425px;
top: -366px;
left: 277px;
text-align: left;
}
#greenBox {
margin: 0 auto;
/*margin-top: 751px;*/
width: 946px;
height: 28px;
text-align: right;
background-color: #336666;
font-weight: normal;
}
#creditBox {
position: relative;
width: 641px;
height: 20px;
top: 8px;
left:277px;
text-align: right;
font-weight: normal;
}
#socLogoBox {
position: relative;
width: 90px;
height: 20px;
top: -15px;
left: 22px;
text-align: left;
font-weight: normal;
}
And I've laid out the HTML so that the DIV's a nested within the main white and green boxes like so Code: <html> <head> <title>Test layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="./css/siteStyle.css" rel="stylesheet" type="text/css"> </head> <body> <div id="whiteBox"> <div id="logoBox"> <font class="logoA">paulstatham</font><font class="logoB">photography</font> <hr> </div> <div id="navBox"> <p class="navA">HOME | PORTFOLIO | NEWS | PRICING INFORMATION | SHOPPING CART | CONTACT</p> </div> <div id="leftBody"> <font class="secHead1">WELCOME</font> <p class="secText">Bla bla bla</p> </div> <div id="rightBody"> Right Body! </div> </div> <div id="greenBox"> <div id="creditBox"> <font class="credits">(c) 2010 Paul Statham - Privacy Statement - Legal Disclaimer</font> </div> <div id ="socLogoBox"> <img src="./images/fbLogo.png"> <img src="./images/twLogo.png"> </div> </div> </body> </html> Now as I said it looks great in firefox But not so much in IE Can anyone offer some advice? |
|||||||