|
CSS - Site Get Screwed When Minimized In Ie.
Hello,
My site is on Wordpress and I have changed some CSS. Now my site gets screwed up when I change something in the sidebar. For example if I add something bigger than sidebar width the text on the right drops all the way down in IE. However in firefox everything seem to be fine. But still in IE when I minimize the window the text jumps down. Also when I checked my site on doomaintools.com it showed a small picture of my site but the page is screwed up. I think it is CSS problem. I want to make the sidebar and right side to a particular width so it doesn't change. How can it be done? site is sushicup.com If you are good with css please help me! I'm so lost. Thank you. rush4rk Similar TutorialsI'm having an issue where the floating element, in this case the Jump box and the sponsor image, aren't hidden when you minimize the browser. They overlap the banner when I just want them to be hidden. Sample Images: Maxed Minimized Thanks, Ryan I am quite new to css and have stumbled my way through making a page. My issue is the footer. My footer contains a background image that repeats across the page. In order to make the footer stick to the bottom I have placed it in a container. My issue is, when the page is minimized and you scroll over the right of the page, the menu that is on the bottom is on the right but the background image does not extend behind it. Code: /*---------------------------------------------
Footer Area Starts here
----------------------------------------------*/
#FooterBody{
background: #6f1e1a url(http://www.cleverchickcreations.com/images/footer.png) repeat-x;
height:232px;
width:100%;
border:1px solid;
color:#f2f1df;
}
#FooterContainer{
width: 936px; margin: 0 auto; padding: 0; text-align: left;
}
/*------------------------------------------------footer--------------------*/
#footer{
width:100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0px;
float: left;
height: 232px;
background-image: url(http://www.cleverchickcreations.com/images/footer.png);
background-repeat: repeat-x;
position: relative;
}
#btmmenu_area{
width:1100px;
height:120px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #dcd66e;
text-decoration: none;
padding: 0px;
float: none;
}
.navcolumn {
float: left;
width: 300px;
height: 120px;
margin-left: 10px;
padding-left: 20px;
padding-right: 20px;
}
.row1 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 140px;
text-align: left;
margin-top: 10px;
padding-left: 10px;
line-height: 140%;
}
.row1 a:link, .row1 a:visited, .row1 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row1 a:hover{
color: #6d5f52;
text-decoration: none;
}
.row2 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 130px;
text-align: left;
margin-top: 10px;
padding-left: 20px;
line-height: 140%;
}
.row2 a:link, .row2 a:visited, .row2 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row2 a:hover {
color: #6d5f52;
text-decoration: none;
}
.row3 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 130px;
text-align: left;
margin-top: 10px;
padding-left: 20px;
line-height: 140%;
}
.row3 a:link, .row3 a:visited, .row3 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row3 a:hover {
color: #6d5f52;
text-decoration: none;
}
.foot-headers {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ef5f9b;
line-height: 140%;
}
.footer_links {
font-family: Arial;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
margin: 0px;
float: left;
height: 20px;
width: 100%;
color: #333333;
padding-top: 35px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.footer_copyrights {
font-family: Arial;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
margin: 0px;
float: left;
height: 20px;
width: 100%;
color: #c2c093;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/*------------------------------------------------validation --------------------*/
#validation_area {
width:100px;
height:34px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #dcd66e;
text-decoration: none;
padding: 0px;
float: none;
}
.validation {
font-family: Arial;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background-image: url(http://www.cleverchickcreations.com/images/validation.png);
background-repeat: no-repeat;
float: right;
height: 16px;
width: 44px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
.validation:hover {
font-family: Arial;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background-image: url(http://www.cleverchickcreations.com/images/validation-0.png);
background-repeat: no-repeat;
float: right;
height: 16px;
width: 44px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
Okay first of all I'd like to thank you for taking the time to look over this. The site is at http://projects.bluefusionx.com/scoped/profile/photos/manage/My%20Photos login using demo demo. The positioning is messed up and I can't figure out why. These are the style rules I have set for that section: Code: #image_browsem {
margin-top: 20px;
width: 809px;
}
#image_browsem_l {
float: left;
width: 52px;
}
#image_browsem_m {
float: left;
width: 705px;
}
#image_browsem_r {
float: right;
width: 30px;
margin-left: 22px;
margin-right: 3px;
}
#edit_caption {
clear: both;
}
.mp_caption {
position: relative;
left: 90px;
margin-top: 40px;
border: 1px solid #9A9A9A;
width: 525px;
height: 125px;
padding-bottom: 0px;
padding-right: 0px;
margin-left: 35px;
margin-bottom: 77px;
}
.mp_caption_left {
float: left;
width: 120px;
height: 182px;
padding: 10px 10px 10px 10px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.mp_caption_right {
float: right;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 0px;
width: 380px;
height: 115px;
background-color: #EFEEEE;
}
.mp_caption_right input {
margin-right: 5px;
margin-left: 18px;
}
.mp_caption_right form {
position: relative;
top: 62px;
}
.mpcaption_text {
margin-top: 8px;
width: 318px;
}
.mpcaption_input {
margin-top: 8px;
}
#move_select {
margin-left: 20px;
}
#mpcaption_delete {
margin-left: 127px;
}
.mp_label {
font-weight: bold;
position: relative;
top: 15px;
}
#mp_label1 {
font-weight: bold;;
}
#mp_label2 {
font-weight: bold;
position: relative;
top: 15px;
}
#mp_label3 {
font-weight: bold;
position: relative;
top: 30px;
}
.mp_caption form {
float: left;
border: 1px solid black;
}
.mp_caption_right form {
width: 375px;
}
Any help is appreciated. Ie is driving me nuts, well I'm coding this web page and it looks perfect so far in firefox, but it looks messed up in IE http://drowninginmytears.org/store/blah.html thats the link.. i want it to look how it is in firefox in IE, but I'm not sure how.. this is my css: Code: body
{
margin: 0px auto;
background-color: #BFD1E1;
text-align: center;
padding: 0px;
background-position: top;
}
#wrap
{
position: relative;
margin: 0 auto;
text-align: left;
width: 679px;
}
#hearts
{
background-image: url(hearts.jpg);
height: 44px;
width: 43px;
position: absolute;
margin-left: 490px;
}
#girl
{
background-image: url(girl.jpg);
margin-top: 190px;
height: 358px;
width: 142px;
margin-left: 10px;
}
h4 {
font-family: Arial, verdana, tahoma;
text-transform: uppercase;
font-size: 1.0em;
text-align: right;
font-weight: bold;
color: #5886B2;
letter-spacing: 0px;
padding: 10px 20px 0px 0px;
margin: 0;
}
h5 {
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.7em;
text-align: right;
line-height: 5px;
font-weight: bold;
color: #C3D4E3;
letter-spacing: 3px;
padding-right: 17px;
margin: 0;
}
#navigation
{
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.54em;
text-align: left;
font-weight: bold;
color: #769DBF;
letter-spacing: 1px;
margin-top: 25px;
margin-left: 20px;
position: absolute;
}
#toptitle
{
background-position:top;
height: auto;
width: 768px;
background-image: url(bg.jpg);
padding: 0px;
margin: 0px;
}
#blueline
{
height: 6px;
width: 752px;
background-color: #D8E8F8;
margin-top: 8px;
margin-left: 8px;
margin-right: 0px;
position: absolute;
}
#headerimage
{
height: 173px;
width: 752px;
background-image: url(main.jpg);
margin-top: 15px;
margin-left: 8px;
position: absolute;
}
#main {
margin-top: 100px;
width: 768px;
margin: 20px 0;
margin-left:40px;
display: inline;
}
#header
{
background-image: url(top.jpg);
vertical-align: bottom;
height: 10px;
width: 768px;
margin-top: 20px;
padding: 0px;
}
#bottom
{
background-image: url(bottom.jpg);
vertical-align: bottom;
height: 17px;
width: 768px;
margin-top: 0px;
padding: 0px;
}
p
{
text-align: justify;
color: #555;
margin-top: 0px;
margin-bottom: 9px;
}
.caps
{
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
ol
{
margin: 0;
padding: 0;
}
ul, li
{
color: #666;
list-style-type: none;
border: 0;
margin: 0;
padding: 0;
}
a:link, a:visited
{
color: #FA65CD;
text-decoration: none;
}
a:hover
{
color: #FD92E0;
}
a:active
{
color: #FB7FD7;
}
#container
{
position: relative;
margin: 0 auto;
text-align: left;
background: url(bgfront.gif) repeat-y;
width: 679px;
}
#content
{
padding: 28px 20px 0 20px;
min-height: 200px;
}
can anyone help? thanks! Ok i have a piece of code for the menu that works the way i want in IE but in Mozilla totaly screwed. Any help to fix this? Try this link in IE then in FireFox HTML Code: <div id="navcontainer"> <ul id="navlist"> <li><a href="#">Home</a></li> <li><a href="#">Community</a></li> <li><a href="#">Members</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">Servers</a></li> <li><a href="#">IRC</a></li> <li><a href="#">About</a></li> <li><a href="#">Links</a></li> </ul> </div> CSS Code:
#navcontainer
{
heigt:100px;
}
#navlist ul
{
margin-left: 0;
padding-left: 0;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a {
padding: 3px 10px;
margin: -3px 6px;
}
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
text-align:center;
background: #366 url(lbg.gif);
width: 100px;
height: 100px;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
I am currently getting back into creating websites and learning new ways to make them. I like using Photoshop to create the graphics, but is there any way that I can use CSS to make it so that on all my pages the main portion on the site remains the same, such as the header, footer and side bars? Appreciate the help. BTW... the site address is Orpheus Designs . Here is a new template I am working on for my site (only "Home", "Events" and "People" work, at the moment). It displays as designed in Firefox but it looks absolutely terrible in IE6. I am aware that there are several ways of hacking IE6 to make it behave differently, however I'm not entirely sure of where in particular I should be applying these. So I am just getting into designing with CSS, and really enjoying it. I put up this site for a friend, its my first coded by hand. I did it all with BBedit on a mac, and it looks fine on Safari and Firefox. However, as you can see, it looks terrible on IE, totally unusable, and I would accept any advice on how to fix it. The menu came from seco consultants and uses whatever:hover to work in IE, though in this case it dont work. The layout is all screwed up too. Anyone want to offer some advice? Here's the site: dobsonfarm.com/connaught Thanks very much, Robin Turner Hi I need css help to make it a 3 column and add google adsense to my site its a music portal my18friends.com hello, ive made a site for a client but for some reason when they first see it it moves up and then after they go back its fine. they use an old IE so i cant see why it does on my computer and its fine on mozzilla to. www.designerbagsboutique.co.uk is the website, can anyone help? Hi Any comments, especially CSS wise would be muchly appreciated... URL One thing I did notice was that when you click on a link to go to a page with more content that the one you were on before, that the entire layout shifts...any ideas anyone? thanks! Modo I've been trying to work this for 3 hours now, and I need help!! My problem is that I get cursors on 3 of my links but not the other two. Link to the site is http://borgweb.se/beta <- try the menu css is: Code: body {
min-width:1024px;
background-color: #f5f3ec;
margin-right: 0px;
margin-left: 0px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
#header {
height:240px;
width:100%;
background-color: #1e1303;
background-image: url(images/topback.png);
background-repeat: no-repeat;
background-position: 50%;
margin-right: auto;
margin-left: auto;
}
#header-logo{
max-width:1024px;
position:relative;
width:1024px;
height:240px;
background-image: url(images/bw_logo.png);
background-repeat: no-repeat;
display: block;
margin-right: auto;
margin-left: auto;
}
#menu {
background-image: url(images/menu.png);
height: 76px;
width: 75px;
float: right;
position: relative;
top: 80px;
right: 20%;
}
#home {
height: 12px;
position: relative;
display: block;
cursor: pointer;
}
#home a {
background-position: 75px;
}
#aboutme {
height: 12px;
position: relative;
top: -3px;
cursor: pointer;
}
#portfolio {
height: 12px;
position: relative;
top: -5px;
cursor: pointer;
}
#blog {
height: 12px;
position: relative;
top: -8px;
cursor: pointer;
}
#contact {
height: 12px;
position: relative;
top: -10px;
cursor: pointer;
}
#container {
width: 1024px;
margin-right: auto;
margin-left: auto;
display: block;
float: left;
}
html is: 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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="header-logo">
<div id="menu">
<div id="home" onclick="location.url('#');"></div>
<div id="aboutme"></div>
<div id="portfolio"></div>
<div id="blog"></div>
<div id="contact"></div>
</div>
</div>
</div>
</body>
</html>
Hey here's the address to my first site using Css layouts. http://funnyguys99.tripod.com/index.htm Please help me fix the logo so it adapts to different resolutions, and I can't figure out how to get that blue bar to the very bottom?!! Please help I'm a big newbie Hey all. I have not done a great deal of web development, and whatever I have done has been with tables. I have seen a great many debates on the whole table vs div topic, and so this time thought I'd put together a site with divs + css rather than tables + css. so I have a few questions. here is the very simple code I've got so far. Code:
<?php include("header.php"); ?>
<div id='container'>
<div id='header'>
Header
</div>
<div id='rootmenu'>
menu
</div>
<div id='docbody'>
<div id='content'>
content
</div>
<div id='sidemenu'>
side
</div>
</div>
</div>
<div id='footer'>
Footer
</div>
<?php include("footer.php"); ?>
and the css file: Code:
html, body
{
height:100%;
}
#container
{
width: 100%;
height: 100%;
margin: 0 auto 0 auto;
margin: 0px auto 0px auto;
}
#header
{
height: 10%;
width: 70%;
background: #000;
margin: 0px auto 0px auto;
}
#rootmenu
{
width: 70%;
background: #fff;
margin-bottom: 5px;
margin: 0px auto 0px auto;
}
#docbody
{
width: 70%;
height: 85%;
padding: 0px;
margin: 0px auto 0px auto;
}
#content
{
height: 100%;
width: 80%;
background: #45f;
float: left;
}
#sidemenu
{
height: 100%;
width: 15%;
background: #56f;
float: right;
}
#footer
{
width: 70%;
background: #333;
margin: 0 auto 0 auto;
}
most of this is based on code I've been looking at on sites like oswd.org. I would just like to know that I'm on the right track with my divs and css before putting too much work into the site. it always sucks to realise a serious design flaw at a later time. so please, could I get some suggestions on what I need to change and any important things I should know? cheers. Hey guys. I've been looking for this site that I should have bookmarked when I found but have lost. I can TRY and describe it as best I can. The main background color was white with, depending on the style you've set, a glass of wine or mug of beer fairly large in size and with a low opacity. The styles were simple. Purple or yellow. Wine or beer. Mostly black text. I forget how it was you were able to change them, but he used it in some examples. The menu had list items similar to the naving convention: liquid 2 column nf fixed 3 column nfnh liquid/fixed 3 column etc. The header was the whole wording of whatever the menu items were. Each page he showed examples using css, xhtml and sometimes javascript with the code on the page. At the bottom of each example it had a group for user comments. Some were empty. I don't remember any logos at all on the site other than the wine and beer. I think the url was something like: www.site.com/nameNO~/ I found it the same day I found the "seabold why tables are stupid" site. I remember reading a solution to a problem that I've encountered but I don't remember the code, I was just skimming the site. I tried finding other solutions, or the same solution somewhere else with no luck. Thanks Hi, I am working on moving my tables based site to a tableless css layout. I just wondered if anyone out there could please help, by viewing my site with a Mac, to see if the header image appears. The URL is: http://www.jimpix.co.uk/ecards2/default.asp Another site I made for someone has a header image, defined via the 'background' css property for one of the DIVs, and I have been told it doesn't appear on a Mac. That site is: http://www.somewhereinbetween.biz/ I am concerned my site will suffer from the same problem with a Mac. It looks okay in IE and Firefox. Thanks Jim OK, I have tested all browsers both Mac and PC, and the only issue I have is with the AOL browser. You can see the site here Can anyone tell me how to trouble shoot CSS for the AOL browser? thanks - Upon initial load, you see a red block over the images. Why does it do that and how can I fix it? http://www.kubicle.com/beta/ Thanks for taking the time to read my question. What is the best site out there for learning what a css sheet is, the rules of making one, and all the commands and options etc.? Thanks again, Brad Hi there. Please have a look here. Could you please report any prob you come into and the browser you're on? Check out the layout section. Thank you in advance :) |
|||||||