|
HTML - Aligning Ie/firefox
Hi, I was wondering if there is a way to make things align with IE and Firefox without making completely separate pages for both?
This is the page I'm referring to: http://www.andytrus.com/resume.html In Firefox, its nicely aligned, but in IE, its all off. The HTML for each header is this: <div id="content_resume"> <h2>Objective</h2> <p>To obtain a full-time design position where my creativity, people skills, and leadership will make significant contributions towards implementing innovative solutions which fulfill user needs.</p><br> The css for this part is: #content_resume { padding-top:125px; padding-left:68px; width:815px; color:#bd92b2; font-size:13px; line-height:20px; } I'd really appreciate some help. Thanks! Similar TutorialsHelp! Some pages of this site are not aligning in Firefox. Please see this link http://www.ntcmc.com/news.html . If you view in FF and in IE you will see the difference. The white space below the navigation and above the text in lower left of page should not be there. Any idea why it is displaying incorrectly? THANKS! Hello, I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it? I started with code something like <div align="center"> <ul type="disc"> <li>Wine</li> <li>Women</li> <li>Song</li> </ul> </div> This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed. I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way? So I'm working on a <dl> and using this bit of code as an example: <style type="text/css">dl{ border: 3px double #ccc; padding: 0.5em; } dt { float: left; clear: left; width: 100px; text-align: right; font-weight: bold; color: green; background-color:yellow;} dt:after { content: ":"; } dd { margin: 0 0 0 110px; padding: 0 0 0.5em 0; } </style> <dl> <dt>first item</dt> <dd>definition for first item in list</dd> <dt>second item</dt> <dd>definition for second item in list<br> extending across more than one line</dd> <dt>third item</dt> <dd>definition for third item in list</dd> </dl> That bit works exactly like you'd expect it to. However, when I apply it to my own list I run into a problem and i can't see the problem. Here's the link to my page: http://site.outletpccomputerrepair.c...opups/test.htm whenever I have a second line of <dd>, the alignment messes up. I can't see what to do in order to get the <dd> elements to align properly whenever there's a second line. Please help! I have a HTML file with two pictures on. They are like title lines. I need the one to be pushed right up to the top-left, and the other one to strech all the way across. I have a screenshot: http://img80.imageshack.us/img80/6827/screenshotjs.png Have a look. The lines are two pictures, they are split close to the middle. How would i go about aligning everything on a page so instead of starting on the very left of the page, it starts X amount of pixels away from the side? Also how can i adjust the space between each line of text? Make it a bit wider or smaller..etc Hey, im not too experienced with web design but me and a friend decided to go on an wing and try and make a flash game web page. Everything been going great till i tried adding a add to the top left of the page. Only thing i could do is set an absolute value to the div but it dose not look right in smaller resolutions. Example script: <div style="text-align: left; position: absolute;"> <!-- Begin BidVertiser code --> <script language="JavaScript1.1" src="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=141137&bid=341700" type="text/javascript"></script> <noscript><a href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_advertiser.dbm">internet advertising</a></noscript> <!-- End BidVertiser code --> </div> <div style="text-align: center;"><a href="http://pinkkittens.org/"><img alt="Banner" src="http://pinkkittens.org/images/pinkkittenbannernew.png" style="border: 0px solid ; width: 815px; height: 121px;" align="top"></a></div> <div id="flashcontent" style="text-align: center;"></div> <script type="text/javascript">var so = new SWFObject("http://pinkkittens.org/upward.swf","upward","815","35","8","#FF88B8"); so.addParam("allowScriptAccess","always"); so.write("flashcontent");</script> I want the banner in the middle...the navigation bar right under it and also the ad on the far left...but could only achieve this with a absolute value...any pointers? Web address for better viewing pleasure is http://www.pinkkittens.org/ I have a form i am creating for a widget to put on my website but for some reason it does not align all the way to the left instead it is off center. How do i put it to the far left? And then there is a random box that appears in the top, how do I remov this? Thank you HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<input>
</head>
<body>
<form id="form1"
action="https://app.realeflow.com//api/contactSubmit.aspx?id=35151&type=1&ar=30178"
method="post" name="form1">
<script type="text/javascript">// <![CDATA[
function numbersonly(myfield, e, dec) { var key; var keychar; if (window.event) key = window.event.keyCode; else if (e) key = e.which; else return true; keychar = String.fromCharCode(key); if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27)) return true; else if ((("0123456789").indexOf(keychar) > -1)) return true; else if (dec && (keychar == ".")) { myfield.form.elements[dec].focus(); return false; } else return false; }
// ]]></script>
<div id="seller_opt" class="optin"
style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 0pt; WIDTH: 477px; PADDING-RIGHT: 0pt; BACKGROUND: url(http://www.ibuyhousesinsanantonio.com/wp-content/uploads/2012/01/Untitled.png) no-repeat 0pt 50%; HEIGHT: 481px; PADDING-TOP: 55px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial">
<p class="text"
style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Name:</p>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<input id="SellerWizard_ownerName"
style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
2px; font-size-adjust: none; font-stretch: normal" name="SellerWizard$ownerName" maxlength="100">
</div>
<p class="text"
style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >E-mail
Address:</p>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<input id="SellerWizard$ownerEmail"
style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
2px;
font-size-adjust: none; font-stretch:
normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerEmail" maxlength="100">
</div>
<p class="text"
style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Zip
Code:</p>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<input id="SellerWizard$ownerZip"
style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
2px; font-size-adjust:
none; font-stretch: normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerZip" maxlength="15">
</div>
<p class="text"
style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Mobile
Phone*:</p>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<input id="SellerWizard$ownerMobilePhone"
style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px 0px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
2px; font-size-adjust: none;
font-stretch: normal"
onkeypress="return numbersonly(this, event)" name="SellerWizard$ownerMobilePhone" maxlength="25">
</div>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<input
id="SellerWizard_FinishNavigationTemplateContainerID_FinishButton"
class="submit" style="MARGIN: 0pt 0pt 0pt 25px"
onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("SellerWizard$FinishNavigationTemplateContainerID$FinishButton", "", true, "", "", false, false))'
name="SellerWizard$FinishNavigationTemplateContainerID$FinishButton"
value="Finish"
src="http://api.ning.com/files/2FjYylCa-7----tgtm1C84N-wASg37E3PmRpOeW5GET9uz4-SqDzfp9Xn7pslOJrglrucDsLut3pJXluZymZKd-mGJj0vi26/submitbutton.jpg"
type="image"><br>
*Optional
</div>
</div>
</form>
<br>
</body>
</html>
You can see where it doesnt align on the website and another view of it not being where it is suppose to be in an html editor, thanks for any help! I'm trying to align my link in the center of the page, but from some reason it still appears left. Here's the code I'm using- Code: <a href="http://or-bar.tripod.com/wheeloftime.html" align="center">Next</a> What am I doing wrong? I want to align a image in the center in html how do i do that. and could i do that i css aligning images. Hi All, I Though i had all this figured out, But unfortunatly thats not the case im actually beginning to pull my hair out now All i want is three buttons in a line with a margin about seperating them from the web form. But i get the attached Heres my HTML HTML Code: <div class="leftColumn">
<asp:Label ID="lblUserRef" runat="server" CssClass="StandardLabel" Text="User Ref"
Style="margin-left: -7px; margin-right: 7px;"></asp:Label>
<asp:TextBox ID="txtUserReference" Style="margin-left: 2px" runat="server" ToolTip="Please enter a User reference"
CssClass="ShortTextBox"></asp:TextBox>
</div>
<div class="SmallSpace">
</div>
</div>
<div class="ButtonContainerDiv">
<div class="ButtonHolder">
<a href="#" class="CancelButton">Cancel</a> <a href="#" class="RaiseButton">Raise</a>
<a href="#" class="SaveButton">Save</a>
</div>
</div>
</asp:Content>
The small space has a pixel height of about 3. My Css for the buttons. HTML Code: .ButtonContainerDiv
{
margin-top:30px;
width:760px;
height: 100px;
margin-left:auto;
margin-right: auto;
}
.ButtonHolder
{
margin-left:auto;
margin-right: auto;
margin-bottom:auto;
margin-top:auto;
}
/* CANCEL BUTTON */
.CancelButton
{
-moz-box-shadow:inset 0px 0px 5px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 5px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ad0034), color-stop(1, #db0042) );
background:-moz-linear-gradient( center top, #ad0034 5%, #db0042 100% );
background-color:#ad0034;
-moz-border-radius:12px;
border:1px solid #616161;
display:inline-block;
color:#ffffff;
font-family:Verdana;
font-size:16px;
font-weight:bold;
padding:8px 40px;
text-decoration:none;
float: left;
}
.CancelButton:hover
{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #db0042), color-stop(1, #ad0034) );
background:-moz-linear-gradient( center top, #db0042 5%, #ad0034 100% );
background-color:#db0042;
}
.CancelButton:active
{
position:relative;
}
/* SAVE BUTTON */
.SaveButton
{
-moz-box-shadow:inset 0px 0px 5px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 5px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f1b214), color-stop(1, #d19602) );
background:-moz-linear-gradient( center top, #f1b214 5%, #d19602 100% );
background-color:#f1b214;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border:1px solid #616161;
display:inline-block;
color:#ffffff;
font-family:Verdana;
font-size:16px;
font-weight:bold;
padding:8px 40px;
text-decoration:none;
}
.SaveButton:hover
{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d19602), color-stop(1, #f1b214) );
background:-moz-linear-gradient( center top, #d19602 5%, #f1b214 100% );
background-color:#d19602;
}
.SaveButton:active
{
position:relative;
}
/* RAISE BUTTON */
.RaiseButton
{
-moz-box-shadow:inset 0px 0px 5px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 5px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #549228), color-stop(1, #377508) );
background:-moz-linear-gradient( center top, #549228 5%, #377508 100% );
background-color:#549228;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border:1px solid #616161;
display:inline-block;
color:#ffffff;
font-family:Verdana;
font-size:16px;
font-weight:bold;
padding:8px 40px;
text-decoration:none;
float:right;
}
.RaiseButton:hover
{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #377508), color-stop(1, #549228) );
background:-moz-linear-gradient( center top, #377508 5%, #549228 100% );
background-color:#377508;
}
.RaiseButton:active
{
position:relative;
}
Please someone help me Hello there i have just created a simple website using div tags as layers to position link elements on the page. I have 2 pages the first page has an image link that takes the user to the second page and the image link has been aligned in a div tag to position it onto the screen. When i test the first page in most browsers the aligning seems to be perfect and is aligning well in all browsers. The problem im facing is on the second page, i have done exactly the same procedure to align a form element and an image link but when published and previewed in safari it is aligned perfectly but in most other browsers the div aligning for the form and the image link are not aligned at all. i cant figure out this problem because the first page is done exactly the same way and that works in all browsers, could someone please please have a look for me its probably something really simple but i cant see it. Below is the source code for both page 1 with the aligning in all browsers image link, and the second page the one that needs to be positioned correctly in all browsers: (PAGE 1 THE IMAGE LINK ON THIS PAGE ALIGNS CORRECTLY IN ALL BROWSERS AND IS FIN) <HTML> <HEAD> <TITLE>HARMONIC WEBSITE p1guides</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> </HEAD> <BODY BGCOLOR="BLACK" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 > <div align="center"> <div style="background-image:url('Background.jpg'); width:1024px; height:768px; background-repeat: no repeat; z-index: 0;"> <div style="z-index: 1; align: right; padding-top: 517px; padding-left: 273px;> <a href="index.html></a> <a href="page2.html"><IMG SRC="images/index_19.jpg" BORDER=0 WIDTH=219 HEIGHT=44 ALT=""></a> </div> </div> </div> </BODY> </HTML> (PAGE 2 THE FORM AND IMAGE LINKS ARE POSITIONED EXACTLY THE SAME AS PAGE 1 BUT APPEAR TO BE OUT OF POSITION IN DIFFERENT BROWSERS?) <HTML> <HEAD> <TITLE>HARMONIC WEBSITE p2guides</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> </HEAD> <BODY BGCOLOR=#000000 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> <!-- ImageReady Slices (HARMONIC WEBSITE p2guides.psd) --> <BODY BGCOLOR="BLACK" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 > <div align="center"> <div style="background-image:url('Backgroundp2.jpg'); width:1024px; height:768px; background-repeat: no repeat; z-index: 0;"> <div style="z-index: 1; padding-top: 260px; padding-left: 700px;> <TABLE WIDTH=328 BORDER=0 CELLPADDING=0 CELLSPACING=0 > <TD IMG SRC="form background.jpg" WIDTH=328 HEIGHT=248 BORDER=1 ALIGN="LEFT"> <form action="mailto:YOUR EMAIL ADDRESS" method="post" enctype="text/plain" border=0 > <br> <input type="text" name="name" value="" size="30"> <br><br> <input type="text" name="Position/primary specialty" value="" size="30"> <br><br> <input type="text" name="Number of patients treated" value="" size="5"> <br><br> <input type="text" name="Hospital" value="" size="30"> <br><br> <input type="text" name="Email address" value="" size="25"> <br><br> <a href="page3.html"> <input type="submit" value="Send"> <a> <input type="reset" value="Reset"> </form> </TD> </div> <div style="z-index:2; padding-top: 66px; padding-left: 520px; margin-top: 0px;> <a href="index.html></a> <A HREF="http://www.harmonic.com"> <IMG SRC="p2-click_15.jpg" BORDER="0" WIDTH=46 HEIGHT=21 ALT=""></A> </div> </div> </BODY> </HTML> Hi, I recently created a landing page for my site but cannot seem to adjust the alignment of the main container element. I want to try and centre the main container vertically by putting a margin at the top. However, it will only let me put in a maximum of 10px margin? If someone could show me how to do this I would be very grateful. The url is http://www.amokcuisine.com and I hope you will see what I am getting at! Thanks GG Okay, I dont want to align text or an image. I want to align my whole page. My page is all the way to left and I want to center it to the middle. Im trying to get something to align to the right side of a table, and cant seem to get it right. What this should look like is 'First One' in a cell, and 'Second One' in a cell bellow it, and to the right side they should each have two check marks side by side. Can anyone see what Im doing wrong? Thanks. <form method="post" action="file.php"><br/><div id="Accordion1" class="Accordion" tabindex="0"> <div class="AccordionPanel"> <div class="AccordionPanelTab"></div> <div class="AccordionPanelContent"><form action="file.php" method="post"> <table border="3" width="600"> <tr> <td><strong>First One</strong> </td> </tr> <input type="checkbox" name="a" /><input type="checkbox" name="aa" /></td> </tr> </table> <table border="3" width="600"> <tr> <td><strong>Second One </strong> </td> </tr> <input type="checkbox" name="b" /><input type="checkbox" name="ab" /></td> </tr> </table> <p></p> <input type="submit" value="Submit" name="submit"><br/></form><br/> Hi, For a web page I'm creating with php I'm trying to align two <div> tags next to each other. I'm thinking I want to use float, but I'm unsure how. Here is what I have so far. 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>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
</head>
<body>
<div style="text-align: center; id="header">
<p>This is the header placeholder</p>
</div>
<div style="text-align: center; id="button_nav">
<p>This is the button navigation placeholder</p>
</div>
<div style="text-align: left; id="text_nav">
<p>This is the text navigation placeholder</p>
</div>
<div style="text-align: right; id="content">
<p>This is the dynamic content placeholder</p>
</div>
<div style="text-align: center; id="footer">
<p>This is the footer placeholder</p>
</div>
</body>
</html>
Any pointers are welcome. Thanks. <div align="center"> <table height="117" cellspacing="0" cellpadding="0" border="0" class="btn1 boxbtn1"> <tr> <td> <a href="images/gymfu.png" rel="lightbox[roadtrip]" title="Gym Fu - Branding">image #1</a></td> </tr> </table> </div> ----- I've tried 'valign="middle" ' in the html code, and also 'vertical-align:center' in the css. no joy. Can anyone help? Hi I am new to this site and very new to html. I just know the basics. My problem is, is there a way to make 1 line of text be split for example have 1 part of the line be aligned to the left and the other to the right. Here is an example, the first part is what is actually happening and the second part is the way i want it to look. This is an example.This is an example This is an example. This is an example. I just realized that my second part of the example didnt come out the way i wanted. So i want the second part to have the first part aligned to the left and the second part aligned to the right. Please help. Its probably really easy but like i said i just know the basics. Thanks in advance for any help that is given Mike Im trying to get the two items in this table aligned. One is suppose to be on the left side of the screen, the other on the right side but I cant get it to work. What am I doing wrong? <table> <tr> <td align="left"> <p>Im suppose to be on the left side of the screen</p> </td> <td align="right"> <p>Im suppose to be on the right side of the screen</p> </td> </tr> </table> I didn't screw this page up like the earlier page I posted.I inserted text ,but am unable to align it properly.Any help would make me and Kelli Maroney very happy this New Year. |
|||||||