|
HTML - Nested Blockquote Tags And Ie
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. Similar TutorialsHello! I'm using the <blockquote> tag to indent the block. It's all working fine in IE and Firefox, but not in Opera. Block is correctly indented on the left, but not on the right. Is there any equivalent tag that would do something similar and would work in all those browsers? My second question is regarding the use of "". Is it a bad practice if i don't use if? For example: is this... HTML Code: <body bgcolor=white> ... different then: HTML Code: <body bgcolor="white"> ? If so, what can happen if i don't use ""? I'm only learning for now, so please, be gentle Thank you! -gavio Hello, I am very new to this. Here is the problem, i have a paragraph, then 3 blockquotes, and then another paragraph. But instead of showing the 2nd paragraph under the blockquotes, it is putting it on the side of the blockquotes. This is undesirable. Here is my head and style:. Code: <head>
<style type="text/css">
body
{background-image:url('Seamless_Parchment_by_FantasyStock.jpg');
margin-top:50px;
margin-bottom:50px;
margin-right:100px;
margin-left:100px;}
h1
{color:Black;
text-align:center;
font-family:"Georgia";
font-size:44px;}
p
{font-family:"Trebuchet MS";
font-size:28px;}
a:link
{text-decoration:underline;
color:black;}
a:visited
{text-decoration:underline;
color:black;}
a:hover
{text-decoration:underline overline;
color:red;}
blockquote
{font-family:"Trebuchet MS";
font-size:24px;
float:left;
width:800px;}
</style>
</head>
And here is the html in question: Code: <p> texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext </p> <blockquote>texttexttexttexttexttexttexttexttexttexttexttext</blockquote> <blockquote>texttexttexttexttexttexttexttexttexttext</blockquote> <blockquote>texttexttexttexttexttexttexttexttexttexttexttexttextt</blockquote> <p> texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext </p> I could just increase the width (tried it - it works) of the blockquotes until the paragraph is forced down, but this seems sloppy to me, and i think it cause problems when other people view it. Any help would be great, Thanks guys! i'm looking for a cheap way out of making collapse/expand code. i've learned a lot of 'ghetto' techniques n thought mayb i can use something similar to the html tricks i've learned in the past. the theory i have is.. i use the title of the collapse/expand text as a link to the text below it to open and close by using the navigating tags: Code: <a name="content">opening/closing text here</a> and the title above the content: Code: <a href="#content">Title</a> to open the area of text. now my idea of a shortcut around the whole css/html/javacript combo is to make the text below it use a Code: <font size=0>content</font> at default and have the href title link change the font size to the default 9pt but I don't know if that's even possible. Is it possible with the Code: <div> tags? and if so, using that, would i still b able to make a link like that? Is it possible to trigger the action of a form with a submit button that's outside the form tags? If so, how should this example be rescripted to make the input tag work outside the form tags? [/code] <html> <body> <form name="input" action="html_form_action.asp" method="get"> First name: <input type="text" name="FirstName" value="Mickey" /><br /> Last name: <input type="text" name="LastName" value="Mouse" /><br /> <input type="submit" value="Submit" /> </form> </body> </html> [/code] 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> 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, 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 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 ? 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 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;
}
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 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 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, 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 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? 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 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? 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 |
|||||||