|
CSS - Centering Website In Firefox
This probably is an easy thing but I have tried a lot of things and I cant center the website on firefox.
it looks good on internet explorer. When you open the website it positions itself on the center and even when you resize the browser. This is how I want it to behave in Firefox. The site is temporary on: http://www.danielyanez.com and the css is on: http://www.danielyanez.com/Stylesheet.css I appreciatte any help in advance and I hope someone can give me a hand, thanks !!!! Similar TutorialsHello everyone! I'm new here. I would really appreciate it if someone could help me figure out why this page is not getting centered properly: SurfnLearn.com -- I cant seem to post url's since I am new.. currently this page is centered for viewers at 1024x768. If at a higher resolution you see it at the left. I don't get it and have been playing around with it for quite some time.. Thank you! could someone tell me why this greenish box doesnt centre in firefox? ive looked in many other forums and the margin command seems to fix everybody elses but not mine. ive tried margin-left and right auto and that doesnt work either. i just want to centre a div (logoholder) inside another(topbody). thanks. CSS: body { padding: 0px; margin: 0px; } #topbody { background-color: #763721; height: 150px; margin:0pt auto; } #logoholder { background-color: #336666; background-repeat: no-repeat; height: 75px; width: 300px; } Hello! I used CSS to vertically center my web site however when it is viewed in the horizontal mode on an iphone, the site is cut off and not centered. How can I fix this? Here is the css I used to center the site: #wrapper { width:850px; height:650px; position:absolute; top:50%; margin-top:-325px; left:50%; margin-left:-425px; } And here is the site: (URL address blocked: google Maid Marian Muffins) I need the result to be fully functional i.e. zoom & pinching functions must still work. Seems like I'm always trying to get something to render correctly in IE but this time it's firefox that is acting ornery. There's not much to the page I'm working on. The table (#schoolstable) should be centered in the #mainbody div. Works in ie, fails in firefox. Here's my css: Code: /* = Default Layout
-----------------------------------------------------------------------------*/
/* Remove padding and margin */
* {
margin: 0;
padding: 0;
}
/* Remove border around linked images */
img {
border: 0;
}
body {
text-align: center;
min-width: 800px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* = Basic Layout and Typography
-----------------------------------------------------------------------------*/
h1 {
margin: 8px 0;
}
h2 {
margin: 8px 0;
}
p {
margin: 4px 0;
}
ul {
margin: 8px 0;
}
li {
font-size:14px;
}
form {
margin: 8px 0;
}
/* =Advanced Layout and Typography by Area
-----------------------------------------------------------------------------*/
#wrapper {
width:760px;
margin: 0 auto;
text-align: center;
}
#masthead {
width:760px;
margin: 0;
background: url(../images/indexheader.jpg) no-repeat center;
height: 270px;
}
#mainbody{
width:760px;
margin: 0;
text-align: center;
}
/* = Basic Links
-----------------------------------------------------------------------------*/
a, a:visited {
color: #000000;
background-color: #EEEEEE;
width: 150px;
line-height: 18px;
text-decoration: none;
font-size: 14px;
font-weight: bold;
display: block;
}
a:hover, a:visited:hover {
color: #FFFFFF;
width: 150px;
text-decoration: none;
background-color:#00FF33;
}
/* = Advanced Links
-----------------------------------------------------------------------------*/
.c0000FF a, .c0000FF a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c0000FF a:hover, .c0000FF a:visited:hover {
color: #FF6600;
width: 150px;
text-decoration: none;
background-color: #0000FF;
}
.c990000 a, .c990000 a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c990000 a:hover, .c990000 a:visited:hover {
color: #FFCC00;
width: 150px;
text-decoration: none;
background-color: #990000;
}
.cCC6600 a, .cCC6600 a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.cCC6600 a:hover, .cCC6600 a:visited:hover {
color: #FFFFFF;
width: 150px;
text-decoration: none;
background-color: #CC6600;
}
.c3366CC a, .c3366CC a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c3366CC a:hover, .c3366CC a:visited:hover {
color: #FFCC33;
width: 150px;
text-decoration: none;
background-color: #3366CC;
}
.c333366 a, .c333366 a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c333366 a:hover, .c333366 a:visited:hover {
color: #CCCC99;
width: 150px;
text-decoration: none;
background-color: #333366;
}
/* = Basic Lists
-----------------------------------------------------------------------------*/
ul {
list-style-position: inside;
list-style-type: none;
}
ul li {
}
/* = Advanced Lists
-----------------------------------------------------------------------------*/
.schoollist {
text-align: center;
}
.schoollist li {
line-height: 16px;
padding: 1px 1px;
width: 150px;
}
/* = Tables
-----------------------------------------------------------------------------*/
table {
border-spacing: 0;
border-collapse: collapse;
padding: 0;
margin: 8px 0;
}
tr {
padding: 0;
margin: 0;
}
td {
padding: 0;
margin: 0;
}
/* = Advanced Tables
-----------------------------------------------------------------------------*/
#schoolstable {
}
#schoolstable tr {
}
#schoolstable td {
}
/* = Forms
-----------------------------------------------------------------------------*/
fieldset {
}
/* = Advanced Forms
-----------------------------------------------------------------------------*/
I just coded this web page, by mistake I coded it with IE (usually i code for FF).. take a look: http://www.invalidheart.org/russell/home.html i want it to look how it looks in Explorer, any suggestions? http://www.djoj.net/home.html <- Faulty Page http://www.djoj.net/style.css <- CSS Hey, for some reason in Internet Explorer my Div will not center and I do not know why. I will try and prvide more detaily when I get home from school. Thank you, ~Brendan Hi, Ive created this website - if you type in solfex limited in google - the address is solfex.co.uk (sorry i cannot post url as im a new user and it works wonders in IE but it goes horribley wrong in firefox I used css to create the website, Im not a firefox user so i have no idea how to fix this I really need help here is my css - CSS Code: Original - CSS Code body { /* for IE; otherwise, BG isn't fully stretched */ margin: 0px; } #bg { position: fixed; margin: 0px; border: 0px; padding: 0px; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; z-index: 0; } #bg img { width: 100%; } #body { position: absolute; left: 0%; top: 0%; width: 98%; height:98%; padding: 1%; z-index: 10; } #title {font-family:"Myriad","Arial","Times New Roman",; font-size:14px; color:#FF6A0A; font-weight: bold; margin-top:-65px; margin-left:25px; } #title1 {font-family:"Myriad","Arial","Times New Roman",; font-size:14px; color:#FF6A0A; font-weight: bold; margin-top:-205px; margin-left:10px; } #title2 {font-family:"Myriad","Arial","Times New Roman",; font-size:14px; color:#FF6A0A; font-weight: bold; margin-top:-125px; margin-left:5px; } #title3 {font-family:"Myriad","Arial","Times New Roman",; font-size:14px; color:#FF6A0A; font-weight: bold; margin-top:-150px; margin-left:5px; } #text { margin-left: -30px; margin-top: 6px; font-family:"Myriad","Arial","Times New Roman",; font-size:13px; color:#000; font-weight: bold; text-align: center; } #text1 { margin-left: 3px; margin-top: 6px; font-family:"Myriad","Arial","Times New Roman",; font-size:13px; color:#000; font-weight: bold; } #text2 { margin-left: 30px; margin-top: 5px; font-family:"Myriad","Arial","Times New Roman",; font-size:13px; color:#000; } #table{ margin-left: 90px; margin-top: -10px; font-family:"Myriad","Arial","Times New Roman",; font-size:13px; color:#000; font-weight: bold; text-align: center; } #table1{ margin-left: 90px; margin-top: -100px; font-family:"Myriad","Arial","Times New Roman",; font-size:13px; color:#000; font-weight: bold; text-align: center; } .underlinemenu{ font-weight: bold; font-family:"Myriad","Arial","Times New Roman",; font-size:15px; width: 100%; height:74px; margin-top:-60px; margin-left:-90px; background-image:url('images/footer.jpg'); } .underlinemenu ul{ /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/ margin-left: -2px; margin-top: 20px; text-align: center; //set value to "left", "center", or "right"*/ } .underlinemenu ul li{ display: inline; } .underlinemenu ul li a{ color: #fff; padding: 0 0 0 0; /*top padding is 6px, bottom padding is 4px*/ margin-right: 20px; /*spacing between each menu link*/ text-decoration: none; } .underlinemenu ul li a:hover, .underlinemenu ul li a.selected{ color: #000; } .underlinemenu1{ font-weight: bold; font-family:"Myriad","Arial","Times New Roman",; font-size:15px; width: 100%; height:74px; margin-top:110px; margin-left:-90px; background-image:url('images/footer.jpg'); } .underlinemenu1 ul{ /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/ margin-left: -2px; margin-top: 20px; text-align: center; //set value to "left", "center", or "right"*/ } .underlinemenu1 ul li{ display: inline; } .underlinemenu1 ul li a{ color: #fff; padding: 0 0 0 0; /*top padding is 6px, bottom padding is 4px*/ margin-right: 20px; /*spacing between each menu link*/ text-decoration: none; } .underlinemenu1 ul li a:hover, .underlinemenu1 ul li a.selected{ color: #000; } .underlinemenu2{ font-weight: bold; font-family:"Myriad","Arial","Times New Roman",; font-size:15px; width: 100%; height:74px; margin-top:-77px; margin-left:-90px; background-image:url('images/footer.jpg'); } .underlinemenu2 ul{ /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/ margin-left: -2px; margin-top: 22px; text-align: center; //set value to "left", "center", or "right"*/ } .underlinemenu2 ul li{ display: inline; } .underlinemenu2 ul li a{ color: #fff; padding: 0 0 0 0; /*top padding is 6px, bottom padding is 4px*/ margin-right: 20px; /*spacing between each menu link*/ text-decoration: none; } .underlinemenu2 ul li a:hover, .underlinemenu2 ul li a.selected{ color: #000; } #container{ height: 400px; width: 100%; position: relative; margin-top: 32px; margin-left: -12px; } #background{ position: absolute; } #content{ z-index: 2; position: relative; top:315px; left:80px; } #content1{ z-index: 2; position: relative; top:315px; left:5px; } div#navbar2 { height: 30px; width: 100%; background-color: #ccc; margin-top:50px; margin-left:25px; } div#navbar2 ul { margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: small; color: #000; text-align:center; line-height: 30px; white-space: nowrap; background-color: #ccc; } div#navbar2 li { list-style-type: none; display: inline; background-color: #ccc; } div#navbar2 li a { text-decoration: none; padding: 7px 10px; color: #000; background-color: #ccc; } div#navbar2 li a:link { color: #000; } div#navbar2 li a:visited { color: #000; } div#navbar2 li a:hover { font-weight: bold; color: #000; } #slantedmenu{ font-weight: bold; font-size: 100%; font-family:"Myriad","Arial","Times New Roman",; width:100%; margin-top:50px; margin-left:310px; } #slantedmenu:after{ /*Add margin between menu and rest of content in Firefox*/ content: "."; display: block; height: 0; clear: both; visibility: hidden; } #slantedmenu ul{ text-indent: 10px; padding: 3px 0; text-align: center; /*set value to "center" for example to center items*/ width:100%; } #slantedmenu ul li{ display: inline; } #slantedmenu ul li a{ color: #494949; padding: 3px 0; padding-right: 20px; margin: 0; text-decoration: none; background: transparent url(images/slantdivider.gif) top right no-repeat; } #slantedmenu ul li a:visited{ color: #494949; } #slantedmenu ul li a:hover{ color: #0033CC; } div#link {font-family:"Myriad","Arial","Times New Roman",; font-size:12px; color:#000; text-decoration:none } div#link a:link { font-family:"Myriad","Arial","Times New Roman",; font-size:12px; color:#000; text-decoration:none } div#link a:visited { font-family:"Myriad","Arial","Times New Roman",; font-size:12px; color:#000; text-decoration:none } div#link a:hover{ font-family:"Myriad","Arial","Times New Roman",; font-size:12px; color:#336699; text-decoration:none } div#link a:active { font-family:"Myriad","Arial","Times New Roman",; font-size:12px; color:#000; text-decoration:none } #link5 { color: #666; text-decoration:none; font-size: 13px; font-family:"Myriad","Arial","Times New Roman",; font-weight: bold; margin-left: 1px; } #link5 a:link, #link5 a:visited { color: #666; text-decoration:none; font-size: 13px; font-family:"Myriad","Arial","Times New Roman",; font-weight: bold; } #link5 a:hover { color: #0033CC; text-decoration:none; font-size: 13px; font-family:"Myriad","Arial","Times New Roman",; font-weight: bold; } #link5 a:active { color: #666; text-decoration:none; font-size: 13px; font-family:"Myriad","Arial","Times New Roman",; font-weight: bold; }
body {
Thanks Ruksana Hello.. I've been working on this site for my Daughter using Wordpress, I've mashed about the CSS, Modding a template for the desired look for the site. I've tied validating it and it brings up a couple of strange comments about the </body> and </html> closing tags, I presume this is why IE7 is having problems displaying the page. Firefox doesn't seem to have an issue at all. I was hoping somebody could take a look at the source with a fresh set of eyes and let me know what is wrong, I've spent hours working on this and can't see it for the life of me. I'm sure it's something simple, I know I had an issue one time where a <P> tag wasn't closed and stopped the whole site being displayed... thanks. blog.mirana[dot]co[dot]uk Hello everyone. I have been working on a redesign of my current website for a while. Early on, I realized that the design was flawed for I.E. (I use Firefox on a regular basis for testing). I went ahead and just finished the design anyway, using Firefox to test. Now that it's done, I'm hoping that there's some stupid error in my CSS that's causing the problems, and hoping that someone can find the problem. If it's a big problem and alot of work to fix, I'm willing to pay someone to help me correct the issue. The main problem is my navigation bar at the top, which consists of drop-down menus. There's also a problem with how the background lines up. If you want to see what I'm talking about, go look at the site both in Firefox and I.E. The URL is: http://www.favillephoto.com/new website/index.html I have 2 different css files. One for my index page, because it is designed differently and has a sidebar. And then a second one for the rest of my pages on the site. I'll attach the CSS for both, in case there's an issue there. Thanks in advance for your help. This is the css file for my index page: Code: body {
padding: 0;
background: #ffffff url('images/img01.jpg');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
color: #AD1112;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 140%;
font-weight: bold;
}
h4 {
font-size: 100%;
font-weight: bold;
}
p, ol, ul {
line-height: 180%;
}
p {
}
ol {
}
ul {
}
blockquote {
margin: 0;
padding-left: 20px;
font-style: italic;
}
blockquote * {
line-height: normal;
}
a {
color: #1267bc;
}
a:hover {
color: #999999;
}
img {
border: none;
}
img.left {
float: left;
margin: 10px 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
hr {
display: none;
}
/* Header */
#header {
width: 1030px;
height: 260px;
margin: 0 auto;
background: url('images/img02.jpg') no-repeat right top;
}
/* Menu */
#menu {
float: right;
width: 1030px;
height: 40px;
padding: 220px 0 0 0;
}
#menu a {
display: block;
height: 32px;
background: url('images/img06.gif') no-repeat;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}
#menu ul {
width: 1026px;
height: 40px;
margin: 0;
padding: 0;
background: #AD1011 url('images/img05.jpg') repeat-x;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
list-style-type:none
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu li a:hover
{ color: #123456;}
#menu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #000000;
}
#menu div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: auto;
height: 20px;
white-space: nowrap;
text-align: left;
background: #6c91c5;
color: #ffffff;}
#menu div a:hover
{ color: #123456;}
/* Page */
#page {
width: 1030px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 760px;
height: 2040px;
padding: 20px;
background: #FFFFFF url('images/img07.gif') no-repeat left bottom;
}
/* Sidebar */
#sidebar {
float: right;
width: 220px;
height: 2070px;
padding-top: 10px;
padding-right: 10px;
background: #ffffff url('images/img07a.gif') no-repeat right bottom;
}
#sidebar a {
color: #dddddd;
}
#sidebar a:hover {
color: #999999;
text-decoration: underline;
}
#sidebar ul {
margin-left: 0;
padding-left: 0;
list-style: none;
font-size: 92%;
}
#sidebar ul li {
background: url('images/img13.gif') no-repeat 0px 12px;
border-top: 1px solid #0B0B0B; padding-left:14px; padding-right:14px; padding-top:5px; padding-bottom:5px
}
#sidebar ul li.first {
border: none;
}
#sidebar ul li h2 {
margin: 0;
font-size: 100%;
}
#sidebar ul li h3 {
margin: 0;
font-size: 92%;
}
#sidebar ul li p {
color: #dddddd;
margin: 0;
}
#sidebar p {
color: #dddddd;
margin: 0;
font-size: 92%;
}
.boxed {
margin-bottom: 10px;
background: #113c5c url('images/img10.gif') no-repeat left bottom;
}
.boxed .title {
height: 30px;
margin: 0;
background: #000000 url('images/img08.jpg') no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}
.boxed .content {
padding: 15px;
background: url('images/img09.gif') repeat-x;
}
.boxedPrintoftheMonth {
margin-left: -790px;
background: #113c5c url('images/img10PotM.gif') no-repeat left bottom;
}
.boxedPrintoftheMonth .title {
height: 30px;
margin: 0;
background: #000000 url('images/img08PotM.jpg') no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}
.boxedPrintoftheMonth .content {
padding: 15px;
background: url('images/img09.gif') repeat-x;
}
/* Footer */
#footer p {
margin: 0;
line-height: normal;
font-size: 85%;
color: #000000;
}
#footer a {
color: #000000;
}
#footer a:hover {
color: #666666;
}
This is the css for the rest of my pages: Code:
body {
padding: 0;
background: #ffffff url('images/img01.jpg');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
color: #AD1112;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 140%;
font-weight: bold;
}
h4 {
font-size: 100%;
font-weight: bold;
}
p, ol, ul {
line-height: 180%;
}
p {
}
ol {
}
ul {
}
blockquote {
margin: 0;
padding-left: 20px;
font-style: italic;
}
blockquote * {
line-height: normal;
}
a {
color: #1267bc;
}
a:hover {
color: #999999;
}
img {
border: none;
}
img.left {
float: left;
margin: 10px 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
img.left1 {
float: left;
margin: 0 70px 0 70px;
}
img.right1 {
float: right;
margin: 0 70px 0 70px;
}
img.left2 {
float: left;
margin: 20px 100px 20px 100px;
}
img.right2 {
float: right;
margin: 30px 120px 20px 120px;
}
img.left3 {
float: left;
margin: 0 110px 0 110px;
}
img.right3 {
float: right;
margin: 20px 60px 0 60px;
}
hr {
display: none;
}
/* Header */
#header {
width: 1030px;
height: 260px;
margin: 0 auto;
background: url('images/img02.jpg') no-repeat right top;
}
/* Menu */
#menu {
float: right;
width: 1030px;
height: 40px;
padding: 220px 0 0 0;
}
#menu a {
display: block;
height: 32px;
background: url('images/img06.gif') no-repeat;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}
#menu ul {
width: 1026px;
height: 40px;
margin: 0;
padding: 0;
background: #AD1011 url('images/img05.jpg') repeat-x;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
list-style-type:none
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu li a:hover
{ color: #123456;}
#menu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #000000;
}
#menu div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: auto;
height: 20px;
white-space: nowrap;
text-align: left;
background: #6c91c5;
color: #ffffff;}
#menu div a:hover
{ color: #123456;}
/* Page */
#page {
width: 1030px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 990px;
padding: 20px;
background: #FFFFFF url('images/img07b.gif') no-repeat left bottom;
}
/* Footer */
#footer p {
margin: 0;
line-height: normal;
font-size: 85%;
color: #000000;
}
#footer a {
color: #000000;
}
#footer a:hover {
color: #666666;
}
I did a site recently and Im having trouble finding what is causing this weird error. If you go to this gallery using firefox: http://www.mmimageart.com/fineart4.html you will notice that the thumbnails under "saguaro" will display wrongly. IF you dont see the problem just keep refreshing the browser until you get the problem. you will get it. there are problems also in: http://www.mmimageart.com/fineart3.html (everglades) http://www.mmimageart.com/fineart.html (Atlantic Coast) What coding error in css can cause firefox to display the website wrong randomly ? Is this a well known error ? if not, then Ill post the code. Thanks in advanced!!! Hey guys i have some image layout problems with my images on safari and firefox on Mac only. Firefox and safari on PC seem fine but its only happening on Mac. The positioning of the images have moved dramatically. Not sure how to fix it CSS is validated and so is xhtml strict Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. How can I, let's see how to say this. Align text to the middle of a div (up and down)... not really a center Normal: ________________________________ Text ________________________________ After: ________________________________ text ________________________________ THANKS Hey everyone, I am fairly comfortable with HTML, and even know a decent amount of PHP and Javascript. But sometimes trying to do the simplest things in CSS makes my head spin! (this is one of those times). I've got a "scrolling" header at the top of a page (stays visible even when scrolling), and am trying to center a DIV (which contains opt-in forms) inside that header. It looks good when my browser window is maximized (at 1280x1024 resolution). But when I minimize the browser or check it in other screen resolutions, the "centering" of the opt-in forms are off. Here is the page... www.wordflood.com/Test/Scrolling_Header.html And here are the CSS includes... www.wordflood.com/Test/style.css www.wordflood.com/Test/IE6_style.css This was really just a quick hack from a "scrolling header" demo I found online, so I must have overlooked something. Any ideas? Hi there, I am trying to center a div within a div. The container div needs to stretch 100% width. It works in FF, but not IE. Any ideas? This is my code: PHP Code: #top_bar{ background-image: url('img/top_bar.jpg'); height: 54px; font-family: arial; font-size: 14px; color: #ffffff; width: 100%; } #top_bar_content{ padding: 18px 0 10px 0px; width: 870px; margin: 0 auto; position: relative; } Hi, i am new to CSS and want to know about how to center a div tag for example i have the following code Code: <div style=""> </div> if i want to place this div in the middle of the browser window that is from equal distance from left right top bottom what will i have to put inside the style attributes. Please recommend Regards ltoso Hey guys, I'm having trouble centering div boxes on my page, wondering if anyone can help. I have tried using {margin: 0 auto;} which works fine, but when the scrollbar appears on the page it knocks it off balance and the other content on the page becomes mis-aligned. I have also tried setting left margins to push the div to the middle, but I figured this would cause problems and wouldn't look right to people using higher than 1024x768 resolutions. Is there any other way? Hello, I have tried to use the auto margin to center a div within a div, but the auto margin only seems to work on the outermost div. Is there a workaround where I can center my content inside of a nested div? Take the example code: Code:
<html>
<head>
<style type="text/css">
body {
background-color: orange;
}
#container {
width: 700px;
margin: 0 auto;
background-color: red;
}
#nested {
width: 700px;
margin: 0 auto;
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="nested">
Text Here
</div>
</div>
</body>
</html>
So I want the nested div to have its content centered, so "Text Here" is in the center. |
|||||||