|
CSS - Website Wont Even Load...!
I'm designing a site: http://bargainboys.ca
I use a lot of DIVs and stylesheets. The website looks great in chrome/safari/firefox... but it doesn't even load in IE! And I can't seem to narrow down the problem, even if I add/remove one element at a time. Can someone provide any feedback if they've had a similar experience? Much appreciated guys. Similar TutorialsHi all i have a page here http://www.prxa.info/test/index.php as you can see i am using rounded borders, but the bottom right and top right images don't want to appear, i don't know why either For some reason i am adding css Code: Original - css Code /* Hide this from IE-Mac \*/ div.spacer { height: 5px; } /* End the hiding */ /* Hide this from IE-Mac \*/ But IE keeps seeing this, does anyone knows why? I have the following coding <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>CSS Sample Page</title></head> <body> <table style="width: 765px; height: 426px;"> </table><div style="text-align: center;"><!-- First Row contains banner and tagline--></div><table style="width: 765px; height: 426px;"> <tbody> <tr> <td style="text-align: center;" width="50%"><font size="7">Web News</font></td> <!-- spacer cell --> <td> </td> <td style="font-weight: bold; text-align: left;">"The latest in up-to-the-minute Web news,discussion, techniques, and <br>trends"</td> </tr> <!-- Second Row contains headline--> <tr> <td colspan="3"> <h1 align="center"><br></h1><h1 align="center">Web Developers Embrace CSS</h1> </td> </tr> <!-- Third Row contains sub-head --> <tr style="font-family: Helvetica,Arial,sans-serif;"> <td colspan="3"><h2 style="text-align: center;">Simple syntax, powerful design tool</h2> </td> </tr> <!-- Fourth row contains article columns --> <tr valign="top"> <td> <p class="copy"><span style="font-variant: small-caps;"> Cascading Style Sheets (CSS)</span> is a style language for the web. It uses common printing and display terminology to allow HTML and XML authors control over the way web pages look.</p> <p>Although designed in 1996, CSS is just now becoming a useable style language because of a lack of support from the major browsers. IE 5.5 for the Macintosh, released in 1999, is the first browser to completely support the CSS1 specification. Support varies across browsers, but both Netscape 6 and IE 5 for the Windows platforms offer more complete (but still not perfect) CSS support.</p> </td> <!-- Spacer cell --><td> </td> <td> <p> Style sheets accomplish the separation of content and style that is integral to the open nature of data on the web. Currently, web page code mixes both document structure information and browser-based display properties, limiting the cross-platform compatibility of the content.</p> <p>With style sheets, the display properties are separate from the content. This accommodates the diverse variety of devices that are becoming available to browse the web. Whether you come to a web site with a Palm Pilot, PCS phone, or Windows CE device, the server can supply a style sheet that matches your display device. CSS2 supports a variety of media devices, including print, that allows content providers to single-source their data.</p> </td> </tr> </tbody> </table> </body></html> all works so far but the problem I am having is adding specific div tags to the H2 elements. DIV class="subhead"> Simple syntax,powerful @Code in Nl 2nd:design tool</DIV> if i try to add this style rule i get the above text show up in the browser and it wont align centrally. also the cascading style sheets wont show up as small caps. can anyone help me Im sorry to ask here but know of nowhere else to ask, can someone please advice me or forward me to somewhere that can help please? thanks I have a layout made up of divs, and held together by another div. That holder div is supposed to have a background image, but it wont show on every browser that I've tried, except IE7. Here's the id: #holder { background-image: url(/files/images/CSS/header.png); width: 750px; margin-left:auto; margin-right:auto; margin-bottom: 10px; margin-top: 10px; } Backgrounds show on other divs, so why not this one? I was mucking around with my style.css at tekindoor.com changing my header around. and I lost all of my photos. I just made some minor changes. I don't know how this could have happened. Do you see anything wrong? I am having trouble with my site at tekindoor.com/phpbb/ not showing images including the favicon. I am regreting taking this course so bad...Thanks alot for your help in my last problem, Im onto assignment 2 now and dont have the slightest clue what to do. The instructions are so unclear, and nowhere anywhere on the internet does it give a straight forward example of how to do a CSS. I am starting with a blank page, using text pad link to a strict html. I dont know where to start and what to type. I am trying all the codes such as <h1> to put in my title and it wont work! I got it to change color with the body color property but thats as much as I can do. Can anyone give me some pointers on how to put heading and writing in my page, why wont it work? Is there a difference between this and when I put my markup in WYSIWYG? All I need to start is to put in my title Christinas cat page... What does a stndard layout look like that will be easy for me to understand? tyvm I've been trying for days to get this to work and nothing i do makes this stupid page extend with the content that i put in. If anyone has any idea's as to why and could point me in the right direction i would very much appreciate it. The link to the site is below, thank you in advance. hxxp://adrian.briansykes.netau.net/ Hello everybody! Im am now designing a webpage with a pull-upmenu. The menu can be seen he http://www.fidelin.se/ucon/index.php The problem in IE7 is that the dropup-items will disappear when you move the mouse over them. Any suggestions on how to solve this? See the code in the post below. I have not constructed the menu myself, as you might see. Thanks in advance Johan edit: the sites @ www.tomaustin.dsl.pipex.com/webdev Ive been doing some googling and cant find out how it works how do i apply attributes like a:link, a: hover to an image I had some like Code:
image a:hover, a:link, a:active, a:visited {
border: etc..
}
this does not work..it comes up with the horrid blue and purple backgrounds how do i do it? tom: ) hi, i have a small website i need to make for a school project. Ever since i added the CSS MENU the sidebar just appears half in the middle of the site and no matter what i do, i cannot get it to the right edge. I have tried margin-right but it does nothing, even if i put it at 5. Its 5 closer away from some strange margin almost in the center of the screen HTML::::::::::::::::::::::::::::::::::::::::::::::::::: </head> <body class="about"> <div id="page-container"> <! header---------------------------------------------------------------> <div id="header"> <h1><img src="images/headings/heading.gif" width="700" height="76" alt="Enlighten Designs" border="0" /></h1> <ul id="navigation"> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Take a tour</span></a></li> <li><a href="#"><span>About us</span></a></li> <li><a href="#"><span>Contact us</span></a></li> </ul> <p><h1><br>Thermal IR - What is it? </h1></p> </div> <! SIDEBAR A---------------------------------------------------------------> <div id="sidebar"> <p>Sidebar, work please, Please work!</p> </div> <! CONTENT---------------------------------------------------------------> <div id="content"> <div class="padding"> </div> </div> <! COPY RIGHT---------------------------------------------------------------> <div id="copyright"> </div> </div> </body> </html> CSS::::::::::::::::::::::::::::::::::::::::: MENU START///////////////////////////////// #navigation a { color: #000; background: ##00E5EE url(left-tab.gif) left top no-repeat; text-decoration: none; padding-left: 10px } #navigation a span { background: url(right-tab.gif) right top no-repeat; padding-right: 10px } #navigation a, #navigation a span { display: block; float: left } /* Hide from IE5-Mac \*/ #navigation a, #navigation a span { float: none } /* End hide */ #navigation a:hover { color: #fff; background: #781351 url(left-tab-hover.gif) left top no-repeat; padding-left: 10px } #navigation a:hover span { background: url(right-tab-hover.gif) right top no-repeat; padding-right: 10px } #navigation ul { list-style: none; padding: 0; margin: 0; } #navigation li { float: left; margin: 0 1em; } //////////////////////////////////////////MENU END #page-container { width: 760px; margin: auto; background: #c9c9d9; } body { font-family: Verdana; } html, body { margin: 0; padding: 0; color: black; } body { font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 12px; color: #666666; background: #ffffff; } .hidden { display: none; } #header { margin: left; height: 250px; background: #c9c9d9; border-top: 1px solid #efefef; } #sidebar { top: 200px; float: right; width: 170px; padding: 5px; line-height: 18px; background: #AAAAAA; border: solid 2px black; } #sidebar .padding { padding: 25px; } #content { margin-right: 240px; line-height: 18px; background: #c9c9d9; } #content .padding { padding: 25px; } #copyright { margin-left: 25px; background: #c9c9d9; } h1 { margin: 0; padding: 0; float: right; margin-top: 57px; padding-right: 31px; } #content h2 { margin: 0; padding: 0; padding-bottom: 15px; } #content p { margin: 0; padding: 0; padding-bottom: 15px; } Code: #navbar {
text-align:right;
background-image: url('images/menu.gif');
background-repeat: repeat;
color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16;
height:26px;
padding-top: 5px;
line-height:0px;
}
i took out the font-size of the classes used over it but still a no go. look here to see it. I am trying to get a Table Style layout using only DIVs and CSS and every combination I could find doesn't seem to work when it involves being dynamic. Statically, it works fine. In the image I attached, "1" is the final result I am trying to get. The Red and Blue boxes at the top and bottom will always have a static height of about 25px, but I want the Green in the center to be dynamic, to take up the rest of the space not occupied by the Red and Blue boxes. In example "2", if I set the green to 100% height, it will just flow outside the parent container. And if I don't set a height, as seen in example 3, it will just be a small bar and the bottom Blue box will just move on up with it. Using a table would be easy since I can easily create that basic structure that would always work, but I'm trying to make something in all DIV and CSS and the past many months, I found no solution! Anyone got any ideas that isn't Javascript based? Thanks! I have several pages on a website I am developing that will not print correctly in IE7. They print fine in FF 2 & 3, Opera, and Safari. In IE7 the page prints the Header, the menu, and the end content on the second printed page, the main content on does not print on printed page 1. If I comment out enough of either the middle or the end of the html page to make it a single printed page document it prints fine. I have tried building the end of the body content using tables but with the same result: only part of the page prints. Any ideas on what may be causing this behavior or directions in which I should look? Any help will be greatly appreciated as I have run out of ideas. Thanks, John White http://www.students.niu.edu/~z162609/asme.html That is my website. As you can see on the left the link box changes with the actual text in the main box. The text goes down as the text on the main content box gets bigger. I am very new to CSS and really do not know anything. I am fairly sure this is a one line fix. However, I really need this and would appreciate any help. Code:
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{padding:5px; text-decoration:none; color:#000000;}
div#header{background-color:#F3F2ED;}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#F6F0E0;}
div#navigation ul{margin:15px 0; padding:0; list-style-type:none;}
div#navigation li{margin-bottom:5px;}
div#extra{background:#CCC8B3;}
div#footer{background:#BFBD93;}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-150px}
div#extra{float:left;width:150px;margin-left:-700px}
div#footer{clear:left;width:100%}
In short, my problem is the image used for the navigation bar wont stay put. It works fine in IE8 but the image alignment isn't fixed (page to page) in Firefox. I used Microsoft expression web 3 to create, and i admit i have no clue what i messed up. Thanks in advance for any responses. website is: tigertandem.com body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; background-attachment:fixed; background-color: #000000; background-image: url("../images/background.gif"); background-position: top left; background-repeat: repeat-x; } #container { width: 100%; margin-top: 57px; border-bottom: 2px solid #363636; background-color: #fff; } #masthead { width: 670px; position: fixed; margin-right: auto; margin-left: auto; overflow: hidden; padding-top: 15px; padding-bottom: 15px; } #navigation { width: 670px; margin-right: auto; margin-left: auto; clear: both; overflow: hidden; Hi all, I am trying to do something that I think is trivial, but just cannot seem to get this to work in IE! I am trying to draw an IFRAME that contains a gray background that contains a document that has a white background. The result is supposed to make the scrolling document in the IFRAME look like a white piece of paper with a gray border of 8 pixels. This works perfectly in Safari and Firefox, but no matter what I try, I cannot figure out how to get this to work in IE (IE8 specifically). Here is the code: PHP Code: <iframe name='monkey' src='poopy.html' scrolling='auto' frameborder='0' style='background-color:gray;width:500px;height:150px;'></iframe> And the document in the IFRAME is trivial PHP Code: <div style='padding:8px;border:1px solid black;background-color:white;'> This is a bunch of txt THis is a bunch of txt ... (repeat this text a bunch so you have a scrollbar) </div> As far as I can tell, IE implements the background-color attribute for IFRAMES, but it seems to ignore the color - either that or its whacked-out box model requires some kinda bizarre workaround that I cannot find. Thanks in advance for the help. -- Jon |
|||||||