|
HTML - Tweaking A Form For Different Browser
I have a Form on a web page where the fields look good in IE7, but look a little out-of-whack in IE6. I've done as much as I can do in IE6.css and the main.css.
When I adjust the page to look better in IE6, it starts to look a little worse in IE7. I see on a main page, there is a code like this: Code: <!--[if IE 6]>
<link rel="stylesheet" href="[var.base_url]/themes/[var.user_theme]/css/ie6.css" type="text/css">
<![endif]-->
Can I use somthing like that on the web page that has the Form, basically saying, if you're viewing this Form in IE6 this is how the Form code should be..." ? If yes, can you tell me, basically how to create it with an Code: <!--[if IE 6]> ? thanks Similar TutorialsHey guys, my problem is I need this code to be tweaked so that when the page is loaded there are 5 thumbnail images between the forward and backward buttons. Currently, the way it is configured, only three images show to start, but as you click on a thumbnail to load a new picture, more thumbnails show up, up to five. I tried to change this myself, only to have the wrong image load when the thumbnail is clicked and other problems. So here is the code in question: HTML Code: <body onload="preloadImages();" bgcolor="black">
<div id="wrapper">
<div id="layer1">
<div style="position:relative;width:958px;height:645px;-adbe-g:p;">
<div style="position:absolute;top:544px;left:112px;width:69px;height:25px;">
<a onmouseover="changeImages('HomeText','Images/HomeTextRolloverGif.gif');return true" onmouseout="changeImages('HomeText','Images/HomeTextGif.gif');return true" href="IanGIbbonsPhotographyMain.html"><img id="HomeText" src="Images/HomeTextGif.gif" alt="" name="HomeText" height="25" width="69" border="0" /></a></div>
<div style="position:absolute;top:544px;left:256px;width:84px;height:23px;">
<a onmouseover="changeImages('AboutText','Images/AboutTextRolloverGif.gif');return true" onmouseout="changeImages('AboutText','Images/AboutTextGif.gif');return true" href="IanGIbbonsPhotographyAbout.html"><img id="AboutText" src="Images/AboutTextGif.gif" alt="" name="AboutText" height="23" width="84" border="0" /></a></div>
<div style="position:absolute;top:544px;left:400px;width:67px;height:25px;">
<a onmouseover="changeImages('HireText','Images/HireTextRolloverGif.gif');return true" onmouseout="changeImages('HireText','Images/HireTextgif.gif');return true" href="IanGIbbonsPhotographyHire.html"><img id="HireText" src="Images/HireTextgif.gif" alt="" name="HireText" height="25" width="67" border="0" /></a></div>
<div style="position:absolute;top:544px;left:528px;width:112px;height:21px;">
<a onmouseover="changeImages('ContactText','Images/ContactTextRolloverGif.gif');return true" onmouseout="changeImages('ContactText','Images/ContactTextGif.gif');return true" href="IanGIbbonsPhotographyContact.html"><img id="ContactText" src="Images/ContactTextGif.gif" alt="" name="ContactText" height="21" width="112" border="0" /></a></div>
<div style="position:absolute;top:544px;left:704px;width:131px;height:22px;">
<a onmouseover="changeImages('CalendarText','Images/CalendarTextRolloverGif.gif');return true" onmouseout="changeImages('CalendarText','Images/CalendarTextGif.gif');return true" href="#"><img id="CalendarText" src="Images/CalendarTextGif.gif" alt="" name="CalendarText" height="22" width="131" border="0" /></a></div>
<div style="position:absolute;top:80px;left:128px;width:69px;height:317px;">
<table>
<tr>
<td>
<div align="center">
<a href="javascript:prevSet()"><img class="nobo" src="Images/prevSet.gif" alt="Previous Set" style="border-style: none" /> </a><br />
</div>
</td>
</tr>
<tr>
<td><a href="javascript:setPic(-2)"><img id="thumbnail1" src="Images/dot.gif" alt="" name="thumbnail1" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(-1)"><img id="thumbnail2" src="Images/dot.gif" alt="" name="thumbnail2" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(0)"><img id="thumbnail3" src="Images/thumbnails/Image1.png" alt="" name="thumbnail3" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(1)"><img id="thumbnail4" src="Images/thumbnails/Image2.png" alt="" name="thumbnail4" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(2)"><img id="thumbnail5" src="Images/thumbnails/Image2.png" alt="" name="thumbnail5" style="border-style: none" /> </a></td>
</tr>
<tr>
<td>
<div align="center">
<a href="javascript:nextSet()"><img class="nobo" src="Images/nextSet.gif" alt="Next" style="border-style: none" /> </a><br />
</div>
</td>
</tr>
</table>
</div>
<div style="position:absolute;top:97px;left:280px;width:565px;height:386px;">
<img id="BigPic" src="Images/Photography/Start.png" alt="Enforcer" name="BigPic" /></div>
<csnopos>
<cspos xpos="80" xpos="0">
<script type="text/javascript" language="javascript">
filenames = new Array (
"Image1.png",
"Image2.png",
"Image2.png",
"Image4.png",
"Image5.png" )
descriptions = new Array (
"Image1.png",
"Image2.png",
"Image3.png",
"Image4.png",
"Image5.png" )
picCount = filenames.length;
index = 0;
function getPic(i) {
return filenames[i];
}
function getDesc(i) {
return descriptions[i];
}
function setPic(thumb) {
if ( index + thumb >= 0 && index + thumb < picCount ) {
index = index + thumb;
var mainPic = document.getElementById('BigPic');
newPic = "Images/Photography/" + getPic(index);
mainPic.src = newPic;
updateThumbs();
}
}
function prevPic() {
if ( index > 0 ) {
index--;
updateThumbs();
}
}
function nextPic() {
if ( index < picCount ) {
index++;
updateThumbs();
}
}
function prevSet() {
if ( index > 5 ) {
index = index - 5;
} else {
index = 3;
}
updateThumbs();
}
function nextSet() {
if ( index < picCount - 5 ) {
index = index + 5;
} else {
index = piccount - 3;
}
updateThumbs();
}
function first() {
index = 2;
updateThumbs();
}
function last() {
index = picCount - 4;
updateThumbs();
}
function updateThumbs() {
for ( i = 1; i < 6; i++ ) {
var thumbPic = document.getElementById('thumbnail' + i);
thumbindex = index + (i - 3);
if ( thumbindex >= 0 && thumbindex < picCount ) {
newPic = "Images/thumbnails/" + getPic(thumbindex);
} else {
newPic = "Images/dot.gif";
}
thumbPic.src = newPic;
}
}
</script>
You can find this in practice he https://campfireditties2.sslpowered....onsPeople.html Any help would be tremendously appreciated. does anyone know a browser that will only parse and evaluate valid HTML/XHTML based on what the doctype is and ignore invalid HTML/XHTML or generate errors. So if I had a XHTML doctype and my code was: Code: this is a XHTML document <br> this should be a new line I don't want the <br> to parse because I want something to trigger that is it not a valid XHTML tag since it is not closed. Any browser won't really care and just show the new line. I would have to validate it on the w3c website to find my error. So I want a browser that would give me these results based on my example code: Code: this is a XHTML documentthis should be a new line and then some sort of error saying "<br>" on line x is invalid. Hi, I work on a Mac, and have Safari, Internet Explorer 5 and Firefox. 1. What do you think I should be building my sites to? What do you use? 2. Also why do some sites work in all browsers? CSS hacks? Microsoft are no longer letting you download Internet Explorer for the Mac, from microsoft.com. Therefore all new mac users from February last year will not be using Explorer. Please help! Thankyou Tom Hey guys should I be worried about coding my site for the IE 5.x series or should I just concentrate on IE6 and IE7 Ok my runescape site looks fine in Mozilla and IE6, but I have two members using IE7 that are getting this: http://img341.imageshack.us/my.php?image=rsguidegw1.jpg Just wondering what the "hack" is for IE7 to get this to align right. The site is as follows: http://rse.pzproductions.com The CSS is: Code: body {
background-color: #5a5a5a;
color: #ffffff;
margin: 0;
padding: 0;
font-family: trebuchet ms, arial, verdana, helvetica, georgia;
font-size: 10pt;
height: 100%;
}
#wrapper {
width: 100%;
min-height: 100%;
margin: auto;
position: relative;
}
* html #wrapper {
background-image: url(images/navbg.gif);
background-repeat: repeat-y;
height: 100%;
}
#navheadwrap {
margin: 0;
padding: 0;
float: left;
height: 100%;
position: fixed;
background-image: url(images/navbg.gif);
background-repeat: repeat-y;
width: 200px;
}
* html #navheadwrap {
position: relative;
}
#head {
background-image: url(images/rsenewtitle1.gif);
background-repeat: no-repeat;
margin: 0;
padding-bottom: 15px;
width: 200px;
height: 200px;
z-index: 2;
}
#navigation {
width: 200px;
height: 100%;
margin: 0;
padding: 0;
z-index: 1;
position: absolute;
margin-top: -50px;
}
* html #navigation {
position: relative;
}
#navigation h3 {
margin: 0 0 10px 10px;
color: #000;
font-size: 14pt;
display: inline;
font-family: papyrus, "trebuchet ms", tahoma, georgia;
}
#navigation ul {
display: inline;
list-style-type: none;
}
#navigation a, #navigation a:visited, #navigation a:active {
color: #17486A;
padding: 5px 3px 0px 15px;
display: block;
text-decoration: none;
width: 85%;
font-size: 11pt;
}
#navigation a:hover {
color: #17486A;
padding: 5px 3px 0px 15px;
display: block;
text-decoration: underline;
width: 85%;
font-size: 11pt;
}
#navigation li.title {
font-size: 12pt;
font-weight: bold;
border-bottom: 1px dashed #000000;
width: 85%;
color: #000000;
margin: 0px auto 0px 10px;
text-align: left;
font-family: papyrus, tahoma, georgia;
}
* html #navigation li.title {
width: 75%;
}
#content {
position: relative;
margin-left: 200px;
padding: 10px 10px 10px 0;
height: 100%;
}
.adminsig {
font-weight: bold;
color: yellow;
}
#content a, #content a:visited, #content a:active {color: #DBA206;}
#content a:hover {text-decoration: none;}
.paragraph {
padding-left: 10px;
padding-right: 10px;
text-align: justify;
}
#content ul {
list-style-type: none;
}
#content h2.orange {
color: #DBA206;
font-family: papyrus, "trebuchet ms", tahoma, georgia;
display: inline;
}
#content h3 {
color: #429AD7;
font-family: papyrus, "trebuchet ms", tahoma, georgia;
display: inline;
}
.newstitle {
font-size: 11pt;
font-weight: bold;
font-family: "trebuchet ms", arial, verdana;
border-bottom: 1px solid #000000;
width: 100%;
color: #429ad7;
}
.border {
border: 1px solid white;
}
#goal {
border-bottom: 1px solid #000000;
color: #eeeeee;
padding: 0px 0px 3px 20px;
margin: 0;
}
#goal a, #goal a:visited, #goal a:active {color: #DBA206;}
#goal a:hover {text-decoration: none;}
#goal h3 {
color: #dba206;
font-family: papyrus, "trebuchet ms", tahoma, georgia;
display: inline;
}
#goal h4.progress {
color: #FF0000;
}
#goal h4.deadline {
color: #0BDF00;
}
#goal h4 {
color: #429AD7;
font-family: papyrus, "trebuchet ms", tahoma, georgia;
display: inline;
}
/* Block Menu */
#ul-table li a {
background-color:#1A4766;
font: 10pt "trebuchet ms", Arial, sans-serif;
display:block;
line-height:30px;
}
#ul-table a:link, #ul-table a:visited, #ul-table a:active {
color: #ffffff; text-decoration: none;
}
#ul-table a:hover {
background-color:#1E6799;
color: #ffffff;
text-decoration: underline;
}
#ul-table {
width: 505px;
text-align:center;
margin: 0px auto;
padding:0;
color: navy;
list-style-type:none;
clear:both;
}
#ul-table li {
width: 125px;
float:left;
border:1px solid black;
border-right:none;
text-align: center;
}
* html #ul-table li a {
width: 100%;
}
#ul-table li.top {
border-bottom:none;
}
#ul-table li.right {
border-right:1px solid #000000;
}
#ul-table li.nolink {
font-weight: bold;
background-color: #D0AE78;
color: black;
}
.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}
/* End Block Menu */
/* Small Block Menu */
#skills td a {
font: 10pt "trebuchet ms", Arial, sans-serif;
display:block;
line-height:30px;
}
#skills a:link, #skills a:visited, #skills a:active {
color: #ffffff; text-decoration: none;
}
#skills a:hover {
background-color:#1E6799;
color: #ffffff;
text-decoration: underline;
}
#skills {
text-align:center;
margin: 0px auto;
padding:0;
color: navy;
list-style-type:none;
clear:both;
}
#skills td {
width: 125px;
float:left;
border:1px solid black;
border-right:none;
text-align: center;
background-color:#1A4766;
}
* html #skills td a {
width: 100%;
}
#skills td.top {
border-bottom:none;
}
#skills td.right {
border-right:1px solid #000000;
}
#skills td.nolink {
font-weight: bold;
background-color: silver;
color: #1A4766;
line-height: 30px;
border-bottom: none;
font-size: 12pt;
text-align: left;
padding-left: 5px;
}
#skills td.nolinkbottom {
font-weight: bold;
background-color: silver;
color: #1A4766;
line-height: 30px;
font-size: 12pt;
text-align: left;
padding-left: 5px;
}
/* End Small Block Menu */
/* Start Stat Tables */
.stattable {
border: 1px solid #000000;
border-bottom: none;
margin: 0;
padding: 0;
}
.stattable th {
font-weight: bold;
font-size: 11pt;
background-color: #1A4766;
border-bottom: 1px solid black;
padding: 2px;
text-align: center;
}
.stattable td {
background-color: #336699;
padding: 2px;
text-align: center;
height: 40px;
border-bottom: 1px solid black;
}
.stattable td.left {
text-align: left;
}
/* New Table Layout */
#table {
margin: auto;
border-left: 1px solid #000;
border-top: 1px solid #000;
}
#table a, #table a:visited, #table a:active {
text-decoration: underline;
color: #000;
}
#table a:hover {
text-decoration: none;
color: #000;
}
.tableheader {
font-weight: bold;
text-align: center;
background-color: #333;
color: #fff;
}
.tr1 {
padding: 3px;
background-color: #369;
color: #fff;
border-bottom: 1px solid #000;
}
.tr2 {
padding: 3px;
background-color: #ccc;
color: #000;
border-bottom: 1px solid #000;
}
td {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
text-align: center;
padding: 5px;
}
th {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
text-align: center;
padding: 5px;
}
Hello, Wonder if you can help, i'm very new to coding, and i have an error in Dreamweaver showing as 'error parsing styles'. It effects IE 6. The code flagged is: body { background-color: #EED38D; background-image: url(images/background.gif); background-repeat: repeat-x; a img {border:0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #333; color: #333; } } Hope you can help! Thanks, Joe Hey guys, haven't built a website for a while and when I did build them I didn't really have a clue. I've built this page which comes up great in safari but Firefox and Ie show jack. What could be the problem? Check: www.goldensparrowstudios.co.uk thanks so much. Hi there, I am currently in the process of re-designing my girlfriends dads companies website and he has requested that customers can fill in a form, and when submitted the form gets emailed to his inbox. At the moment his website opens up outlook express, when the form is submitted, using the mailto: function, but he really doesn't like this. Is there any other way of emailing from a browser without any programs popping up? I am open to suggestions on other ideas that may work here if anyone can think of anything. Thanks in advance. Tom I'm almost done with my new website's main template. Now, the only thing that remains is that my website looks exactly how I want it in IE and total crap in Firefox. I was wondering if anyone could help me out/figure out what's going on. The URL is www.smbmovie.com... I was wondering on the board's opinion. Basically, the ALTtext element used in image display, provides two things: 1. Replacement text if the image should be abscent so that you can easily reference which image is missing and replace it. 2. Mouseover text of the image so surfers can get short extra information about the image. Now, you may argue that a Browser should come set as default to ignore mouseover text. However, there is a reason why many web developers still use this in preference to an image title. The reason being that it is extra programming for the developer to type out additional code which merely plays the same role as the original Alt attribute. Some argue that the programmer shouldn't even give an Alt value! Sadly, in turn many browsers are unfortunately becoming designed without the Alt text attribute, making many Alt-text-specific sites hard to understand. If you honestly find a small bit of mouseover text which really only exists for a fraction of a second intrusive of your surfing time then you've got issues. Who agrees? Hi all I'm new to html... I'he created one Html Page. Which comtains Frames. It is working fine in Firefox but in IE8 size is increased.. (Looking Like Zoom In) and Border of the Frame is not displaying in IE8. (You can see it in Images) so How to Make it look Similar on all Browser? Please help me to solve this.. This page looks exactly like I want it to in Firefox but not in ie6 or ie7. In ie6 the fieldsets are different heights but I want them to be the same (as in firefox) and in ie7 some of the submit buttons are hidden. Can someone help me with this? Thanks... Hey HTML Forum!! So im gettingr really frustrated with this problem I'm having with this HTML issue. I did all of the coding in dream weaver(Yea by coding I mean drag and drop )Everything looks great opened up in dream weaver. Then when I open it in a browser (IE and Firefox) everything is all chopped up. check this out. First shot is in DW, second shot is opened in IE: What do you guys think? This is only the second website I have done and havnt had much formal training so im kind of flying by the seat of my pants. Thanks in advance!!! EDIT: You can actually go to the home page and see how bad it looks. www.miattconstruction.com the home page isnt AS bad but go to project or contacts and the pages get worse. Hello all. I know that to view changes I've made to my website, I need to reload my browser or empty my cache. I'm just wondering if there's any way to have the site reload itself or something so that guests who have seen the old site don't have to hit reload to view changes. Thanks, ~~Idaho Parkour Hi, I've get this website http://jigsawpropertiesuk.com and it looks perfectly fine in firefox but once you use internet explorer thats when things start going wrong. the login/register thing at top is moved all the way to the right and so is the right fade picture. In addition near the bottom of the page where the posts are located the text is out of position. I have no clue what so ever why its doing this since I've never had this issue with other websites. The css is located he http://jigsawpropertiesuk.com/wp-con...ties/style.css Any help is appreciated Hi - can someone please have a look at this site for me from a PC (pref IE8). My site is pretty basic in respect to xhtml (although I have just converted it into a WP site) but it uses a little jquery - however, all was fine, FF/Safari/Opera - no problem but in IE8 a lot of the styles seemed to have gone a bit mental - I am praying that my parallels on my Mac is being odd but perhaps I need to make some CSS fixes??? Unfortunately I cannot get to a PC in the immediate time... Here is the link ... Thanks Y (also here is a screen shot of the what my mac is showing - the correct styles ) Hey all! I am currently working on my first web project...a Japanese city network using IDN's. I used IE6 for testing from the ground up, but this week downloaded IE7 (at last!) Of course there were obvious display issues! My question is (as a total noob) should I be looking to get the layout I want via '.em' code use, or do I need to add a section of IE7 hacks to my CSS sheet? To visit the site to see what I mean got to xn--u9j358k96enkbl89i.com (punycode) which translates as Japanese (roughly) for JapaneseCities.com. This site displays fine in IE6, but in IE7 is messed up. I need to learn how to implement code that will help my sites to display the best with the most popular browsers - but I don't know where to start! Please advise.. Hey guys, I was wondering how you check on older browsers such as IE 6, 5 and Netscape, etc. Is there a program that lets you use older browsers or do you just have old computers laying around. Working on it now. Thanks. Hello, Well ive been having this problem with my website: http://www.ngrock.com When i visit the website using Firefox it looks just perfect but when i use IExploer, the sidebar doesn't seem to work, instead of it being on the LEFT side of the website, parallel to the content. It displays Below the content, aligned left. What can i do to get the sidebar in its place on all browsers. Thank You. Claudio- |
|||||||