Hello everyone my div area height is displayed different with these browsers: Firefox and Internet Explorer. In Chrome and Safari my div area looks fine could you help me please.
Here is my div area
.openmeclis
{
position:relative;
margin-left:4px;
background:#66B3E3;
width:90px;
height:370px;
display:inline-block;
overflow:hidden;
}
Here is a caps what I mean
This is from Firefox
Here is from Chrome
<div id="subMenu">
<div class="openbaskan" style="float:left">
Başkandan <br />
Özgeçmişi <br />
Haberler <br />
Videolar <br />
Fotoğraf Galerisi
</div>
<div class="openmeclis" style="float:left">
Meclis Üyeleri <br />
Meclis Gündemi <br />
Meclis Kararları <br />
</div>
</div>
CSS:
#subMenu
{
width:964px;
margin-left:auto;
margin-right:auto;
display:none;
font-size:14px;
font-style:normal;
height:336px;
font-family: 'Museo300Regular';
}
Just use line-height to your css. Because every browser renders different line-height,that's why your div is showing problem with different browsers.
Here is the link for the same problem that you have asked
FireFox 3 line-height
CSS line-height issue across browsers
Check this edited answer
Edited Demo
Note the edited CSS below:
.openmeclis
{
position:relative;
margin-left:4px;
background:#66B3E3;
width:90px;
height:370px;
overflow:hidden;
float: left;
list-style: none;
}
#subMenu {
width:964px;
margin-left:auto;
margin-right:auto;
font-size:14px;
font-style:normal;
height:336px;
}
HTML:
----------
<div id="subMenu">
<div class="openmeclis">
<ul>
<li>Başkandan</li>
<li>Özgeçmişi</li>
<li>Haberler</li>
<li>Videolar</li>
<li>Fotoğraf Galerisi</li>
</ul>
</div>
<div class="openmeclis">
<ul>
<li>Meclis Üyeleri</li>
<li>Meclis Gündemi</li>
<li>Gündemi</li>
<li>Meclis Kararları</li>
</ul>
</div>
</div>
Do not add unnecessarily <br/> tag. Instead of that you can use the <ul> methods. You do not need to add style tags in your html when you have the CSS. I don't know what you add in the #sub menu... I just edited the HTML and CSS for openmeclis
Related
this is my first question and I hope I would get some help here.
I have made this HTML page that has 5 DIV's mainly:
Header
Content
Footer
Content contains
Left
Right
The Left and Right Div's float on Left and right respectively.When I put something content div with an H1 tag the div's get somewhat disorted and I get a approx. 10px space between the header and content section, somewhat like this:
Disorted
However the original one should be:
Original
<body>
<a target="_blank"><div id="main" >
<div id="header" >
<a style="color:#000000" href="home.html">Home</a>
<a style="color:#000000" href="about.html">about</a>
<a style="color:#000000" href="Our customers.html">Our Customers</a>
<a style="color:#000000" href="Career.html">Careers</a>
<a style="color:#000000" href="Contact us.html">Contact us</a>
</div>
<div id="content">
<div id="left" ></div>
<div id="right" ></div>
Home
</div>
<div id="footer">
<a style="color:#FFFFFF" href="home.html">Privacy Policy</a>|
<a style="color:#FFFFFF" href="Feedback.html">Feedback</a>|
<a style="color:#FFFFFF" href="disclaimer.html">Disclaimer</a>|
<a style="color:#FFFFFF" href="Manadatory.html">Manadatory Disclosure</a>|
<a style="color:#FFFFFF" href="sitemap.html">Site Map</a>|
</div>
</div></body>
Here is my CSS Code:
#main
{
height:900px;
background-color:#000000;
}
#header
{
height:100px;
background-color:#00FF00;
padding:70px;
padding-right:70px;
font-size:30px;
text-align:center;
background-image:url(Images/text3.jpg);
padding: 50px;
}
#content
{
height:700px;
background-color:#FFFFFF;
}
#left
{
float:left;
height:700px;
background-color:#FF0000;
width:150px;
background-image:url(Images/navbar2.jpg);
}
#right
{
float:right;
height:700px;
background-color:#FF0000;
width:150px;
background-image:url(Images/navbar2.jpg);
}
#footer
{
padding:50px;
padding-right:70px;
font-size:20px;
text-align:center;
height:100px;
background-image:url(Images/footer.jpg);
}
Fixing position of the div's using position hasn't helped. Thanks for any help in advance :)
Right click and inspect element on your browser and check the divs. You should see what's happening to it. Most likely it will be some default styling that's giving some margins. That's why most people use some kind of reset.css as a clean base. I imagine the default css is applying margins to the <p> and <h1> tags.
Maybe try adding something like:
h1 {
margin:0;
}
Obviously you could specify only certain margins rather than all or .content h1{} to just apply styling to the headers within the content block.
This is my code which is working fine but when i change my headline2text to "Sale Price $25 . This is a sample text. $244" then auto logo image changes its position. I do not want logo to change its position but it should remain on its place and should not be affected by the headline2Txt. How to fix this issue?
<div id="wrapper">
<div id="mainContainer">
<p class="copyrights" id="copyrights"></p>
<div>
<img id="Image_Car" src="http://i.share.pho.to/25a090ef_c.png" />
</div>
<div id="headlineText">
<p id="headline1Txt" >Sample bag1</p>
<p id="headline2Txt" >Sale Price $25 </p>
</div>
<div id="disclaimer" >
Details*
</div>
<div id="Image_logo">
<img id="Imglogo" src="http://i.share.pho.to/93578bd4_o.png" />
</div>
<div >
<button class="btn btn-primary" type="button" id="ctaBtn"><div id="fadeIn" > Learn More Now </div></button>
</div>
</div>
#Image_logo img
{
position:relative;
width:140px;
height:30px;
top:-3px;
left:390px;
}
</div>
I may not understand what you're asking, but I think the lack of a float is throwing you. Adding some css like this..
<style>
#Image_logo img {
width:140px;
height:30px;
}
#wrapper {
float:left;
}
</style>
...should work. It should be in a separate .css file of course.
You have position: relative; on #Image_logo img yet you try to position it the "absolute way". Try to change your CSS like this:
#Image_logo img {
position:absolute;
width:140px;
height:30px;
top:40px;
left:390px;
}
Try giving your #Image_logo img position: absolute instead of relative, then modify top, left etc. Then it should be always in the same place;
I've a html page with some div tags in it, I want to put my container div in center of computer screen whether I zoom-in or zoom-out.
I want to modify my html page in such a manner as www.bing.com. The homepage centers on the screen when you zoom-out, whereas, my web page continuously expands while zooming.
My HTML pagecode:
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:70%;
background-color: #bbb;
}
#container{
margin:auto;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
How to adjust my CSS code so that I can implement centralized page style same of (www.bing.com)? I want to centralize my container div on pressing Ctrl+-
I just check bing.com. It seems they change position and size of their centered div using JS. It centered while page load and the same when page is re-sized. And do not forget absolute position for #container.
<script>
$(window).resize(function() {
doResize();
}
$(document).ready(function(){
doResize();
}
function doResize() {
var windowHeight = $(window).height();
$('#container').css('top',(windowHeight - $('#container').height())/2);
}
</script>
it has something to do with you using percentages rather than say Pixels or EMs
I got it so that it is staying centered but i still have it sticking to the top of the browser.
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:250px;
background-color: #bbb;
}
#container{
margin:auto auto;
width:750px;
height:400px;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
Edit possibility
you could use a MediaQuery and set the top:###px so that the rest of your page sets up with the center. but you would probably have to create several CSS Files or write a lot of CSS code to make it work
Answer to css get height of screen resolution
this answer has a link in it to media queries that takes you to w3.org Media Queries site
After looking that bing page you just referred us, I believe this is what you probably want this
<html>
<head>
<title>
HTML test page
</title>
<style>
body {
width: 100%;
height: 100%;
margin:auto;
}
#container {
vertical-align: middle;
margin:auto;
height:100%;
width:100%;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
text-align:center;
font-size:5em;
color:#fff;
}
#inner {
margin:auto;
width:50%;
height:auto;
border:100px solid #bbb;
color:Green;}
</style>
</head>
<body>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<span><div id="inner">HTML Test page</div>
</span>
</div>
</body>
</body>
</html>
This creates a 100px sized border to your div, which is aligned in center as you want
I am trying to learn table-less design and having a difficult time with something that should be easy
I am trying to make a save or cancel button at the bottom right of the screen in the designer it looks good but in the browser (IE and Chrome) the buttons move into the the right part of the form
I have tried height auto and leaving it out all together. If I fix the height of the main div then it works, but I don't always know that height. Is there anyway to make the buttons "flow" at the bottom of the main div?
Thank You
The Code
<%# Page Title="" Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="NewAccount.aspx.cs" Inherits="BudgetApplicationCSharp.NewAccount" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css" media="screen">
#container
{
width:500px;
margin: 5px;
}
#main
{
width:500px;
height:auto;
margin:1px;
}
#left
{
float:left;
width:50%;
padding-left:0px;
margin:0px;
}
#right
{
float:right;
width:50%
}
ol
{
list-style:none;
}
input[type=button]
{
float:right;
clear:right;
}
input[type=Text]
{
font:15px "MS Sans Serif";
}
label
{
font:15px "MS Sans Serif";
}
fieldset
{
padding:0px;
margin:0px;
border:0px none;
}
ol
{
padding:0px;
margin:0px;
border:0px none;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="container">
<div id="main">
<div id="left">
<fieldset>
<ol>
<li>
<label for="AccountName">
Account Name</label>
<input id="AccountName" runat="server" />
</li>
<li>
<label for="Description">
Description</label>
<input id="Description" runat="server" />
</li>
<li>
<label for="InstituteName">
Institute Name</label>
<input id="InstituteName" runat="server" />
</li>
<li>
<label for="AccountType">
Institute Name</label>
<select id="cboAccountType" runat="server">
</select>
</li>
</ol>
</fieldset>
</div>
<div id="right">
<fieldset>
<ol>
<li>
<label for="AccountNumber">
Account Number</label>
<input id="AccountNumber" runat="server" />
</li>
<li>
<label for="RoutingNumber">
Routing Number</label>
<input id="RoutingNumber" runat="server" />
</li>
</ol>
</fieldset>
</div>
</div>
<div id="buttons">
<input id="btnSave" type="button" value="Save" runat="server" />
<input id="btnCancel" type="button" value="Cancel" runat="server" />
</div>
</div>
</asp:Content>
Adding the style rule #buttons { clear: both; } should cause the button div to go below the floated divs.
this is a floating-problem. you need some kind of "clearfix". in your case i would add an overflow:hidden; to #main... this will create a new box model context, which will solve your issue. here you got a jsfiddle to demonstrate this behaviour (just remove the overflow:hidden there to see the difference) -> http://jsfiddle.net/3k3yd/
Add
overflow: auto
to the #main definition.
This solves what others have said without the need for additional markup (ie adding an empty div)
Here's a fiddle with the result.
Your experiencing an issue common across browsers that occurs when you float two divs within a container. The issue is that the container's height does not expand to the height of the floated divs within it. The fix to this issue is commonly referred to as the clearfix.
I have applied the clearfix to your markup in this example: http://jsfiddle.net/3D7hz/
It adds this styling to your stylesheet:
/* float clearing for IE6 */
* html .clearfix{
height: 1%;
overflow: visible;
}
/* float clearing for IE7 */
*+html .clearfix{
min-height: 1%;
}
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
And adds the clearfix class to your main element in the markup:
<div id="main" class="clearfix">
This link describes the clearfix problem in detail:
http://www.positioniseverything.net/easyclearing.html
I have this page...http://thornwoodfinehomes.com/whatsNew.php and it looks good in Firefox and IE 7,8 & 9 but not in Safari and Google Chrome.
Here is the HTML
<div class="contentAreaAvailable">
<div class="content">
<div class="contentText">
Some Text
<img src="pics/whatsNew1.jpg" width="407" height="247" border="0" />
</div><!--contentText-->
<div class="rightContent">
<img src="pics/whatsNew2.jpg" width="332" border="0" />
<br /><br />
<img src="pics/whatsNew3.jpg" width="332" border="0" />
</div><!--rightContent-->
</div><!--content-->
<div style="text-align:center; width:100%; float:left; padding-top:15px; font-size:26px;">
<stong><em>Coming soon, some exciting opportunities in Roseland Burlington.</em></stong>
</div>
</div><!--contentAreaAvailable-->
And here is the CSS
.contentAreaAvailable{
background:#000;
padding:50px;
border:1px solid #FFF;
width:912px;
height:730px;
float:left;
}
.content{
padding-bottom:4px;
}
.contentAvailable{
/*padding:20px 0 0 0;*/
width:566px;
font-size:22px;
float:left;
padding-bottom:10px;
margin:10px 0 0 0;
}
.rightContentAvailable{
float:right;
}
I have no idea why its doing this in chrome and safari, any help would be appreciated. Thanks
I'm not sure how you're setting the widths, but it seems the left div contentAvailable is a little bit too big. When I resized it from 566px down to 500px, the right div rightContentAvailable slid up, and the layout looked normal. (This was in Chrome.)
Also, using the developer tools in Chrome is a good way to troubleshoot layout issues.