|
CSS - Ie And Safari Not Showing Content Of Webpage
i can't seem to get my site to view properly in safari and ie, firefox seems to do a fine job (of course).
the left and right sides should show a red shadowed bar but they are not in the browsers listed above. would someone check the css in firebug and tell me what's happening?? thank you in advance for any help! the site is greatfoodcoop.com Similar TutorialsHi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Hi, I have a div that I've styled with CSS so that it will have an horizontal scrollbar. The CSS for it is: Code:
#thumbs {
position: relative;
width: 100%;
height: 130px;
overflow-x: scroll;
overflow-y: hidden;
text-align: center;
}
For some reason, this works on all browsers except Safari for Mac. Any help will be greatly appreciated. Thanks, Ralph Hi, I have a div that I've styled with CSS so that it will have an horizontal scrollbar. The CSS for it is: Code:
#thumbs {
position: relative;
width: 100%;
height: 130px;
overflow-x: scroll;
overflow-y: hidden;
text-align: center;
}
For some reason, this works on all browsers except Safari for Mac. Any help will be greatly appreciated. Thanks, Ralph I have an image gallery, that when the thumbnail is hovered over a larger image appears. This works fine in Firefox and IE but not in Safari. I have validated my code and css. The gallery is at http://www.briandobson.com.au/sthaust.html Code:
<tr>
<td valign="top">Boat Harbour, Goolwa<br />
75 x 35cm <br />
$720</td>
<td valign="top"> </td>
<td>
<a class="thumbnail" href="#"><img src="SthAust/thumbs/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="200" height="46" />
<span>
<img src="SthAust/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="775" height="248" />
</span>
</a>
</td>
</tr>
CSS is in the head and separate styles.css Code: .thumbnail img {
border: 1px solid white;
}
.thumbnail:hover {
background-color: transparent;
float: left;
}
.thumbnail:hover img {
border: 1px solid white;
}
.thumbnail span {
position: absolute;
background-color: white;
padding: 1px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
display: block;
}
.thumbnail span img {
border-width: 1px;
}
.thumbnail:hover span {
visibility: visible;
background: top;
left: 0px;
z-index: 50;
}
With thanks Angela This is the problem, and it is driving me crazy... Code: <html>
<head>
<title>content breaking out of container</title>
<style type="text/css">
div {
border: 1px solid black;
}
#container {
border: 5px solid green;
height: 200px;
}
#sidebar {
height:100%;
width: 50%;
}
#footer {
padding:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
In FF/Safari the footer 'breaks out' of the container. I can't see why it would do this. In IE and Opera, it stays in the container, as I expect it would. I'm trying to find a fix for FF, but it's in vain... any ideas? Here's the url Template Any comments on the code will be very helpfull. Even if it is out of topic. In IE it looks pretty good. In firefox the border goes under the large image and the image navigation is left there naked on the body background. Hi, I had this working but somehow it's not working again. The problem I am having is that scroll bars are showing up in my iframe in Firefox, Opera, and Safari, but not IE7 and IE6. Here is the link: http://www.caillouette.com/NewCatsMeow/ I know I need to tighten up my style sheet, but if someone could tell me how to solve this, I would be very happy. Here's the iframe code in the index page: Code: <div id="bodyInfo"> <iframe name="mainBody" width="770" height="602" src ="body.html" scrollbars="NO" border="0"> </iframe> <!-- end #bodyInfo --></div> Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code:
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code:
#contentBlock {
position: absolute;
top: 130px;
left: 200px;
height: 101%; /* Hack to force vertical scroll bars */
right: 280px;
min-width: 400px;
visibility: visible;
display: block;
}
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
.disclosureCollapsed {
background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
display: block;
text-align: right;
/*position: absolute;*/
float: left;
top: 0px;
left: 0px;
width: 18px;
height: 20px;
}
.disclosureCollapsed:hover {
cursor: pointer;
}
How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken hi every one i am kind of new to this i am making a website but how do you put css on you webpage i am using web page maker and i want to put a table on my website just take a look at tothegame.com and see their table for games and stuff and i also want to use the search function and the filter and the abcdfg function how do i get or where do i get that kind of tables for my website its amovie site and i want to use that as a list for my movies that people can choose and filter by name or released date hope that ssomebody can help me out thanks Hey guys so I'm trying to create a bar at the top of my webpage, except the left and right sides are different than the middle. So I thought I'd approach this by dividing up the webpage into three sections, left middle and right. Code:
body { background-color:#B7E7F9; }
/*Big Wrap*/
#mainwrap{ margin-top:0px; height: 100%; width: 100%; }
/*Left Side*/
#leftwrap{ align: left; background:url(images/Left_Top_Bar.jpg) no-repeat; }
/*Right Side*/
#rightwrap{ align: left; background:url(images/Right_Top_Bar.jpg) no-repeat; } /*Header*/
#header{ background:url(images/Top_Bar_Part.jpg) repeat-x; }
I then implemented it in html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My Webpage</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head>
<body>
<div id="mainwrap">
<div id="leftwrap"></div>
<div id="header"></div>
<div id="rightwrap"></div>
</div>
</body>
</html>
Now when I open the html file in a browser, all I see is the background color that I put in for body, but none of my wraps seem to be displaying. I was also wondering if there was an easier way to do this. The header is just a simple rounded rectangle that is running across the entire top. I want the same rounded rectangle look for all users regardless of resolution. Thank you for your help, Popnbrown hello guys, I am creating a webpage using CSS for my layout. when I look at the page, it seems ok but all my "DIV" are positoned relative to the left side of the screen. so if you maximize the screen, you get a huge space on the far right side of the screen. I was wondering if there is anyway I can centre the page in the window no matter the size of the screen. I have provided a link to a version of the page and the CSS file is included here. each id represents a DIV in the design. http://www.radien.plus.com/test.html thanks guys Code:
#Logo
{
Margin : 0;
Padding : 0;
Width : 125px;
Height : 125px;
Border-color : aqua;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Border-top : 1px solid#00;
Border-bottom : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-right : 1px solid#00;
}
#news
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height : 250px;
position : absolute;
top : 140px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#Products
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height : 200px;
position : absolute;
top : 397px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#unknown
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height :150px;
position : absolute;
top : 605px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#banner
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 604px;
Height : 125px;
position : absolute;
left : 140px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#shopping
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 125px;
Height : 125px;
position : absolute;
top : 7px;
left : 750px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#search
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height : 90px;
position : absolute;
top : 140px;
left : 725px;
Padding : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#poll
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height : 210px;
position : absolute;
top : 238px;
left : 725px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#footer
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height : 210px;
position : absolute;
top : 238px;
left : 725px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
I am trying to make a 3 column web page. I have the middle column, but when I add the code below for the left and right columns, nothing shows up. Is this the wrong code? Do I need to wrap them in certain tags? Thanks for your help! Website: www.freewebs.com/weareamazing Code: #sidebar-a {
float: left;
width: ;
margin: 0;
margin-right: ;
padding: 5px;
background-color: white;
}
#sidebar-b {
float: right;
width: ;
margin: 0;
margin-left: ;
padding: 5px;
background-color: white;
}
I know it's probably something simple, but I'm having trouble centering my web page in CSS. I want to center it no matter what resolution a visitor has their monitor set to or the size of their monitor. I've tried the following to no avail: Code: margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; Any suggestions? Hey Folks, I am a newbie with designing webpages and having some problems with a website that I just created. If any of you could point to a resource of help me out, that be great. Heres the link www.pcdigger.com The middle part is messed up in firefox. HTML and CSS both are validated per www.w3.org but I guess, that doesnt do anything for firefox. Thanks, DesignFlaw hello guys,, I was wondering how to make a webpage take the full browser size and not over flow or be smaller than the browser window also atleast 800 x 600 thnx for ur time.. HMV I have a QA site where I want to have a very translucent image displayed over the entire page to help our testers more visually recognize that the site they are on is not production (or worse thinking they are on QA when they are on production). My initial idea was to create a fixed position div with a repeating background images. While this visually accomplished what I want, it ends up masking the entire site, making it impossible to click on any links that are displayed underneath the QA images. What is the best way to do this (sans javascript)? Any help is much appreciated. Hello everyone; I've been working on my webpage and I just noticed that my page loaded differently ( not aligned ) in my friends wide screen Laptop. I was hoping if anyone knows of a way to display the webpage properly no matter what resolution or screen? would this be done with css or just plain HTML? please let me know. thank you. mamut Hello - this is my first time on the forum. I'm sure I must be missing something really simple. I'm not very experienced at CSS, and must admit I can't grasp the inherited properties principle, which may be the cause of my problem. I've pasted my code for the web page and my properties stylesheet below. Although, as you can see, I want to put a header near the top of the web page, nothing appears in my browser. (I mean nothing, the words I have put the header tag to just aren't there). I would be very grateful for some help. Thank you. The CSS validator says "Value Error : color attempt to find a semi-colon before the property name. add it" which I don't understand. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head> <title>Love Local Food - about us</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="love local food, love local, love food, local food, exeter food, devon food, devon vegetables, exeter vegetables, local vegetables, real bread, slow food, slow food exeter, slow food devon, rye bread, good food, good local food, van food, van exeter, van devon, local van, mobile shop, workshops, workshop, farm, farms, organic, organic food exeter, fresh food, local fresh food, fresh food exeter, fresh food devon " /> <meta name="description" content="We sell good fresh food by van in your locality" /> <meta http-equiv="PRAGMA" content="NO-CACHE" /><!-- --> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="presentation.css" /> </head> <body> <!-- Header --> <div id="bar-top"> <p class="links"> <a href="index.html">home </a> <a href="mobileshop.html">mobile shop </a> <a href="farms.html">farms </a> <a href="workshops.html">workshops </a> <a href="joinus.html">join us </a> <a href="aboutus.html">about us </a> <a href="contactus.html">contact us </a> </p> </div> <!-- end of header --> <!-- main column --> <div id="main"> <p> <img src="slice4.jpg" alt="love local food" border="0" width="400" height = "125" class="center" /></p> <p> <img src="logo.gif" alt="love local food" align="left" border="0" width="300" height="175" /></p> <p class="header">about love local food</p> <p> Love Local Food is a new social enterprise initiated by Emmas Bread, Shillingford Organics, West Town Farm and organicArts along with others including David Tuffield, David Bossano, Rachel Moffat, Nicola Beglin, Paula Garwood, Amber Dawkins and Chukumeka Maxwell.</p> <p class="text">We are a group of local producers, educators and passionate food lovers who propose to bring a new and simple way of shopping to Exeter and surrounding areas.</p> <p class="text">We first met in July 2007 with the intention of becoming a workers co-operative that supported each other in the produce and sale of locally grown food.</p> <p class="text">We want to provide local food to local communities, provide a fair return to local producers and provide links between the consumer and producer through educational activities and resources.</p> <p class="text">We want to help consumers make the connection between the food they eat and the environment in which they live, and to help local people achieve well being.</p> <p class="text">We look to a future of the sustainable production and distribution of food, including allotments and gardens, where we renew our relationship with food and nature, and share the land.</p> <p class="text">A future where local communities, schools and other institutions are involved in commissioning local food production, community celebrations and sharing with other cultures.</p> <p class="text">A future where we are all open to new ideas about food and our relationship with it.</p> <!--links-box--> <div id="links-box"> <p class="links"> <a href="emmasbread.html">emmas bread </a> </p> <p class="links"><a href="shillingford.html">shillingford organics </a></p> <p class="links"><a href="westtown.html">west town farm </a></p> <p class="links"><a href="organicarts.html">organicARTS </a> </p> </div> <!--end of links box--> </div> <!-- end of main column --> </body> </html> /* Presentation Stylesheet */ .header { font-family: Arial, Helvetica, sans-serif; font-size:20px; color:#000000 margin:0; padding:10px 10px 10px 15px; } .links { font-family: Arial, Helvetica, sans-serif; text-align:center; font-size:20px; color:#000000; } .links a:link { color: #560007; text-decoration:none; } .links a:visited { color: #EF9C00; text-decoration:none; } .links a:active { color:#560007; text-decoration:none; } .text { font-family: Helvetica, Arial, Verdana, sans-serif; font-size:15px; color:#000000; } |
|||||||