HTML - Browser Compatibility? - Tables? - Aligning?
Hi,
I have recently downloaded a web template and have been editing it in Dreamweaver CS4. I created a web menu via an application I bought online and intergrated that into the webpage. It displays out of line in Dreamweaver however appreas to work fine (everything in line) in IE 7. I do not know where I am going worng with my toolbar / web menu and what I need to change for compatibility. It is written in java but I suspect its some dodgy html code that has be written by me. The website is www.ritzphoto.net/newsite/ css Code: body { margin: 0px; padding: 0px; background: #242323; text-align: justify; font: 13px Arial, Helvetica, sans-serif; color: #444444; } h1, h2, h3 { margin-top: 0px; font-weight: normal; color: #FFFFFF; } h1 { font-size: 2.4em; } h2 { font-size: 1.8em; } h3 { font-size: 1.4em; } p, ol, ul { margin-bottom: 1.8em; line-height: 160%; } a { color: #000000; } a:hover { text-decoration: none; color: #FF0000; } a img { border: none; } #wrapper { width: 900px; margin: 0 auto; border: 10px solid #FFFFFF; } /* Header */ #header { width: 900px; height: 150px; margin: 0px auto; } #header a { text-decoration: none; color: #FFFFFF; } /* Logo */ #logo { float: left; padding-left: 20px; } #logo h1, #logo p { margin: 0px; line-height: normal; font-weight: normal; color: #FFFFFF; } #logo h1 { padding: 25px 0px 0px 0px; } /* Menu */ #menu { float: right; } #menu ul { margin: 0px; padding: 49px 0px 0px 0px; list-style: none; line-height: normal; } #menu li { float: left; margin: 0px; } #menu a { display: block; width: auto; padding: 6px 20px; } #menu a:hover { text-decoration: underline; } #menu .active { background: #404040; } #menu .active a { background: url(images/img02.gif) no-repeat 100% -40px; } /* AWM */ #awmAnchor-menu { width: 900px; padding: 10px 0px 0px 0px; background: #FFFFFF; margin: 0px auto; } /* Page */ #page { width: 900px; margin: 0px auto; padding: 10px 0px 0px 0px; background: #FFFFFF; } #header-pic { background: url(images/img05.jpg) no-repeat left top; width: 900px; height: 210px; } /* Content */ #content { float: right; width: 570px; } .post { margin: 0px 0px 30px 0px; } .post .title { margin: 0px; background: #444444 url(images/img02.jpg) no-repeat left 50%; padding: 7px 25px; font-size: 1.4em; } .post .title h1 { } .post .entry { padding: 0 20px; } .post .meta { font-weight: bold; padding-left: 20px; } .post .byline { margin: 0px; padding-left: 20px; } /* Sidebar */ #sidebar { float: left; width: 300px; } #sidebar-bgtop { } #sidebar-bgbtm { background: url(images/img03.jpg) no-repeat left bottom; } #sidebar-content { background: url(images/img01.jpg) repeat-y left top; } #sidebar ul { padding: 0px 0 5px 0; margin: 0px; list-style: none; } #sidebar li li { margin-left: 20px; margin-right: 20px; line-height: 30px; padding-left: 15px; border-bottom: 1px dashed #BDBDBD; background: url(images/img04.jpg) no-repeat left 50%; } #sidebar li ul { margin-bottom: 1.8em; list-style: none; } #sidebar h2 { background: #444444 url(images/img02.jpg) no-repeat left 50%; padding: 7px 25px; font-size: 1.4em; } #sidebar a { text-decoration: none; } #sidebar a:hover { text-decoration: underline; } /* Search */ #search { } #search form { margin-bottom: 1.8em; padding: 0px; } #search fieldset { margin-left: 20px; padding: 0px; border: none; } #search #s { width: 160px; } /* Footer */ #footer { clear: both; width: 900px; height: 50px; margin: 0px auto 30px auto; color: #FFFFFF; } #footer p { margin: 0px; padding: 19px 0px 0px 0px; text-align: center; line-height: normal; font-size: smaller; } #footer a { color: #FFFFFF; } Cheers, Dave Similar TutorialsHello, 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 Can someone please offer advice related to http://www.telfordsteamrailway.co.uk...dale/index.php the 'Visit our website' link works in IE & Opera but not SAfari / FF/ Google the page validates - I just cant see why it doesnt work Working on it now. Thanks. Hi all, I created a HTML page with CSS. While i ran the code in IE 8.0, the alignment was in order. But when i ran the same HTML code in other lower versions of IE, i am facing some alignment problem like submenu arrangement, displacement in the page contents. Please anybody suggest me with a solution. What is that i should do to rectify it.. Thanks and Regards.. I've created a blog on tumblr and attached it to a domain I purchased. The problem is it looks absolutely great in Safari (Windows) but not as great in IE or Firefox (Windows). Here is the site in safari, the screenshots mac but its the same on windows. and here is the IE version. The font (Century Gothic) looks terrible compared to the safari version. Tumblr has the feature to edit html but I am not that great with html and have basic knowledge. If anyone wants to see the html I will show them it. If anyone could help me alter the html to make the website look as smooth in IE and Firefox as it does in Safari I would be majorly grateful. Thanks, Danny Hi all, im new here and was wondering if you guys could help me out? I work for an email deployment company and we have started working with a new deployment system called YesMail and we have found that some browsers are not compatible with padding so I was wondering if anyone knew what browsers dont support it fully? Thanks in advance. i have resolved this thanks Hi, I have had a new template developed for osCommerce, most browsers display the site correctly such as Firefox but Internet Explorer has some issues. IE shows the site as being aligned differently with some other design issues. I think it may be a problem with the stylesheet. My domain is InkRound.co.uk Here is the CSS code from stylesheet.css My site is using a HTML based template with osCommerce. I just found out that a site I built for a nonprofit isn't working properly on Internet Explorer or Firefox. It does work on Safari. It appears the client-side image maps are the problem. I used <map> and <area> inside <img>. Here is some of my code: <img src="About.jpg" width="1100" height="825" usemap="about" /> <map name="about" /> <area shape="rect" coords="285,29,316,50" href="" title="HOME" alt="Home" /> <area shape="rect" coords="383,29,460,50" href="" title="FOR TEACHERS" alt="For Teachers" /> </map> (URLs removed intentionally to protect client's privacy.) I was going by the book, Beginning HTML, XHTML, CSS, and JavaScript, by John Duckett, published in 2010. According to this book, this is the recommended type of image map. It says this code should be compatible with today's most popular browsers. So does this type of image map simply not work on Internet Explorer and Firefox? Or is there something wrong with my code? What type of image map does work with all the major browsers? Hi everyone. New to the forums and thought I could get some help with regards to my personal website http://judyhuynh.ca Anyways, the problem is the browser compatibility. Just when I thought everything looked OK, I checked it out on my other browsers (Chrome, Firefox, Safari, Opera) but there was one problem with IE. I use Cutenews for blogging and it does not show the line breaks in between paragraphs and it does not show my .png profile picture on the left of the sidebar where there's the quick bio. http://browsershots.org/http://judyhuynh.ca/ Line breaks in Cutenews are generated automatically when typing paragraphs. So I don't know and the .png thumbnail on the left, nooo idea about that. It irritates me because it just looks so ugly on IE, ahha and some people still use that 'not-so-great' browser. Help is much appreciated!!! Heya, I'm working on my new website design for http://nickerson.biz and all was going good. Came to the point where I check compatibility in all browsers. Figured everything would be fine since its 100% xhtml transitional valid. Turns out IE ****s it up real bad. Has 5 noticeable things that SHOULD NOT be happening. Site looks great in FF, but IE... I can't figure out whats going wrong. http://i42.tinypic.com/nntyly.png Ideas? View source to see coding, all seems fine. I have a music blog on blogger (http://mildtowild.blogspot.com) and I recently found out using browser shots that my site does not look right in IE. (CURSE YOU IE!). I have a lot of code and css, and am not quite sure where to start looking. I do not believe my page is html or xhtml compliant, but I'm pretty sure it's impossible to make any blog from blogspot 100% compliant. I'm pretty sure I have closed all my tags properly and my css is correctly structured. I am just puzzled as to how it can look so perfect in firefox and safari, and then be radically different in all IE versions. I have included screenshots of what it looks like in both browsers, also feel free to view the source on my page, and if any of you have any suggestions as to what to check or try, please be my guest. Thanks for looking! IE: http://img360.imageshack.us/img360/9...be72325hn9.png Firefox & Safari: http://img370.imageshack.us/img370/8250/ffkl6.jpg Hey, I'm having issues with coding a website to be cross-compatible with Firefox and Internet Explorer (views fine in Firefox). I'm a BS artist when it comes to web design, and I could really use some help. The site is at this address: www.thepynebros.com It views correctly in Firefox, however, Internet Explorer distorts the font sizes, and will not wrap the CuteNews script around the picture of the trees on the index page. Can someone help me out? What am I doing wrong? Hi, I am working on my website with my limited knowledge of HTML. As I am using frames I've found that my website will not appear in some browsers (namely firefox, which I find unusual as its usually excellent). It works fine in safari (i'm on a mac). the site is www.sambrewster.co.uk I'm creating a noframes site too so the option is there. I thought it might have something to do with the character encoding? Any help or pointers would be excellent! Just to know where I've gone wrong would be great. Thanks very much Hey all 1st post here as I am wanting to learn some things rather than pay someone a couple of dollars to fix a problem I have in regards to tables and a page I am about to use and that the fact that I put 3 tables on it and would like to discuss the html5 css3 fix so tables are not used. Here is a post I made earlier elsewhere which has been there most of the day without a reply > OK first let me say I do SEO and I made a thread on DP RE this same thing, that quite honestly 4 posts in has gone **** up and is about as much use to anyone finding it as a lot of the other crud is that gets found for searches and doesn't answer any questions. So let us address that here with this thread please and stuff er that other place. Like many I am always learning and over the past few months I have been adding little one page 5 card mobile friendly additions to my sites with browser "if" meta info for mobile browsers. Well 2 days ago I got a new domain name to add to my TM characters and it is quite an important domain (well to me at least), namely tted.com So I found a nice HTML5 CSS3 page template that was free to use and started to add things to it. It is just one page. The funny thing is though that presently that is all I need for a whole site. So I started working on the page/site as I said and in order to display cartoon strips (3 rows of four captions) I started to add 3 tables. 3 tables of four columns and 3 rows. Yes I am learning I know tables are old hat I and others ned to learn the work arounds. I am not sure how to get the CSS right and work this so the page remains HTML5 and CSS3 which is how it started. I am sure I am not the only person with this problem in regards to tables on their site neding CSS updates. So I posted on DP hoping to discuss this with the idea being that it would turn into a helpful discussion on turning table based pages (well pages with tables used to display things) into CCS based alternatives, how wrong I was - we will now find a Goldfish of a thread going nowhere about as helpful as a kick in the head. So can we address that here on XXXXXXXXX? I would like to discuss the in's and outs of how we get tables replaced by CSS3 & HTML5 So let's be clear We know the page I am referring to when found was HTML5 and by adding three tables on the page I made the present page non HTML5 and non handheld device friendly. That is to to say from what I can see b4 I put the tables in the page looks to be designed to work in handhelds (jeez it's html5 for gawds sake it ought to be). That is clear OK!! What I would now like to do is discuss this. The object of the exercise is to learn. To learn that tables are not mobile friendly (we get that - so has Joe Soap and John Doe reading this 1 year later now). So tables are not mobile friendly so how do we fix that is the obvious next question. With CSS is the answer. Now this is where we turn this thread into a useful thread where we discuss this tables and CSS factor and the issues or it turns into yet another Goldfish thread clogging up the search results of the super dooper super highway internet web thingy. (Humour is allowed Yes?) So anyone into HTML5 and CSS3 want to discuss here wiht me how we fix the tables issue? This will be useful for me to learn and fix the page before I reproduce it to build the rest of the site. It will be useful for future readers finding it in the SERPS and it will be useful to the forum here to have a useful page that gets found for the relevant search terms (I put them in the thread title I am not daft). More people finding things means more traffic more traffic might mean more members. So anyone up for a decent discussion on this and want to make this thread a useful resource at the same time? If not and this is likely to end up a load of old crud blogging up search results I kindly request a mod just deletes this and I will look for somewhere else to discuss these things. So anyone up for a proper discussion on HTML5 CSS3 and tables and how they (tables) are not mobile friendly and to make this a proper useful thread to discuss how we address this and make the page I have mobile friendly. I could just as easy go and pay someone $2 on that other forum to fix it btw but I would like to learn myself and at the same time discuss it so others can also learn to. Hey all, [moved to CSS forum] Okay so it may be that I'm just overly tired or just overly wrong in how I coded this one page, but I need you help. I've been working with CSS for quite awhile-using a CSS sheet to populate HTML code that entirely relied on DIV IDs. I have also been using relative positioning until now. I mention this because for the most part this worked in creating mostly identical layouts between IE8, Firefox 3.5, and Safari 3. Today, I decided to code a page using mostly DIV STYLE tags instead of editing the CSS page. I thought this might be more efficient, and it certainly was easier to code. I also used absolute tags instead of relative. Using Dreamweaver CS4's live view everything displayed as it should. So I uploaded it all in Safari and again-everything displayed as it was designed. However, IE8 seemed to display all of the content that was positioned absolutely about 50px too far to the right. Firefox-normally my friend-wouldn't even display to top portion of the page. Since the majority of hits are IE8 (sigh) I have just temporarily coded it to display correctly within that browser-but I need help to figure out what to change so that such a compromise doesn't need to occur. The page is live at my site http://qwertcorp.com/reactivate . There you can see the CSS and HTML code. I will post the raw code in here in a few minutes. I know these are probably just rookie (read: stupid/sloppy) mistakes, but I really want to learn how to avoid this. Thanks so much in advance! How do you use make it so the space between BULLETS (HTML DISC) does not have such a large space between the lines when viewing between INTERNET EXPLORER and Any other browser like Firefox?? http://www.camarosource.ca/main_new_...new_layout.htm Right side "Recent Posts". You'll notice that if you view with Firefox that it shows the words close to get on top of each other. HOWEVER, View the same link in INTERNET EXPLORER and you'll soon discover it's now what's almost 1 more line inbetween the top words and the ones below them. How can I STOP THIS?? If I make it fit in Firefox, it's WAY too high in IE cause it adds another line. If I make it fit in IE, it's like 3/4 the height of the area for Firefox. Thanks! 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/> 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/> 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> |