I set my footer as fixed so that even if the page is scrolled down its footer will remain as is.
When I browse it in VS 2010 run/debug in Chrome, it works perfectly!
But when I deploy it to IIS 6.1, and browse it using Google Chrome it is not doing what I want. It does work, however, in IE and Firefox. Is this a Chrome-specific problem? I am doing something like this:
<div id="footer">
Footer goes here
</div>
Here's the CSS:
#footer {
background: #2d89ef;
bottom: 0px;
color: white;
font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
height: 50;
left: 0%;
position: fixed!important;
position: fixed!important;
right: 0%;
text-align: center;
top: expression((0-(footer.offsetHeight)+
(document.documentElement.clientHeight?
document.documentElement.clientHeight:
document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop?
document.documentElement.scrollTop:document.
body.scrollTop))+'px');
visibility: visible;
width=100%;
}
Please advice on possible solutions, thanks!
Try to (restart your IIS Manager then clear your browser cache. This might solve your problem.
Related
I am working on a personal website as a beginner and I have the font available to me. When I add it with a font face on my hero banner, it shows up weirdly. I don't know if that's because the font just won't work with the site or not.
Here is what I currently get:
The font should be in the middle and left of the banner, and the text should be white. I tried different variations of font-face and I tried adding styles to space out the letters. I tried another response from this post.
However, that didn't work. Any suggestions?
My hero code and CSS:
body {
margin: 0;
padding: 0;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
color: black;`enter code here`
}
img{
opacity: 50%;
}
.croppedbanner {
width: 100%;
height: 200px;
object-position: 0% 39%;
object-fit: cover;
}
.container{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
div.hero-text{
font-family: khFont;
letter-spacing: 5px;
font-size: 55px;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
transform: translate(0px, -200px);
margin-left: 10px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: blue;
-webkit-text-fill-color: red;
}
#font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
EDIT 1: Ok so I managed to get different colors that aren't black and white. But I kind of need those two colors. The colors are also different between browsers. Google Chrome - is in Light Mode and Opera GX - is in Dark Mode. The dark mode one I can't turn off.
Here's a screenshot of the website with both browsers.
Opera:
Chrome:
I (think) I am holding the site locally on my pc, as I only see an IP address at the bar. So I can't share the site.
Additionally, the code was edited to show in its entirety. This is just for the hero banner, so the HTML will be small, and I did some extra steps for the banner too. If you want to throw in suggestions for that, feel free :)
i think i can give a helpful solution for you.
First, let me try to show you about how to use css selector while coding a web page.
There was more than one selector that we can use.
For this case, i should recommend you to using class selector, or maybe child selector.
/*With class selector*/
.hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
}
/*With child combinator selector*/
div > .hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
}
#font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
For the documentation of using selector, you can read more in this link.
And the second is, let's start to edit the class to fixing the output in the interface.
/*With class selector*/
.hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
display: block;
margin: 0 auto;
text-align: center;
}
#font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
For more details, you can read in these documentations:
Display Docs
Text Align Docs
Margin Docs
Thank you
It's been resolved! Turns out, in Opera, you can enable "Force Dark Pages" which I thought it would change when I clicked the setting on the page. When working with local sites, you wont be able to change the setting on the page itself, you have to go into the browser settings.
Thanks everyone for your help! :)
I uploaded a responsive site I did for a friend that does not render full width on the Index Page whether viewed on a smartphone or tablet.
The lady is doing me a favor as I try to get my name and work known. She has a business she'd like to see grow and we thought the Internet the place to start.
The odd thing is that site's other pages render just fine with proper width and height.
This leads me to believe the problem is with the "#media screen" queries.
I believed the CSS "width" and other properites and values in the full width, non-mobile page's code, would "cascade" down into the smaller mobile queries but added the properties "head," "html, body" and "footer" sections to see if that would improve the situation.
It did not.
The site can be viewed here: www.notaryonwheelsshaver.com
The CSS can be read here: http://www.notaryonwheelsshaver.com/css/nows.css
Any help would be greatly appreciated.
Your first media query (780px) has a typo in html,body -> height: 100%x; That may be interfering with the min-width attribute under it.
I don't know if that will fix it, but it's what I noticed.
I think the issue is in your CSS file:
html, body {
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 26px;
background-color: #FFF;
color: #555;
padding: 0;
margin: 0;
height: 100%;
/*width: 100%;*/
}
/*width: 100%;*/ is commented out which makes the browser skip the code try changing it to:
html, body {
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 26px;
background-color: #FFF;
color: #555;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
EDIT: You have the width also commented in:
.wrapper {
/*min-width: 100%;*/
min-height: 100%;
}
I have built a landing page for an external client all is working fine, I have a background image which fits the hole screen, I modified the existing body tag within the bootstrap.css class as follows
body {
margin: 0;
background-image: url('/Content/Images/Danone-Background-New.png');
background-size: 1440px 800px;
background-repeat: no-repeat;
background-size: cover;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
z-index: 9999;
}
Again this works perfectly when running locally, I then publish this site to the hosting environment, and when I navigate to the site all the content is displayed minus the background image, so I first assumed I have the wrong path so I checked the body style using firebug and this is what I see
body {
background-color: #fff;
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857;
}
So for first glance I assumed "Oh that's strange it hasn't copied over my body styles!" so I repeat the process again and low and behold the body style remains as above, So i login to the server navigate through the files to the bootstrap.css find the body tag and again it looks as I expected
body {
margin: 0;
background-image: url('/Content/Images/Danone-Background-New.png');
background-size: 1440px 800px;
background-repeat: no-repeat;
background-size: cover;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
z-index: 9999;
}
Yet the image does not render.
What is wrong with this? I have tried ctrl f5, looked in the development tool bar checked for any 404 erros nothing displayed ? I'm baffled?!
Link to check www.danoneultimate.com.au
In the <head> section of your website, you load a different stylesheet.
<link href="/Content/css?v=WY2Ybti5pBJYm0QfqiFBL2b5U_cKoeAWQC9DALv4mnw1" rel="stylesheet">
Change it so that it loads bootstrap.css:
<link href="/Content/bootstrap.css" rel="stylesheet">
You have edited bootstrap.css but you're loading bootstrap.min.css.
Your code works just fine :)
I have a website that is created in Wordpress Delegate Theme. I want to insert a snow animation effect in background of the website (all website pages). I tried to include the snow.php in the index.php but the page template becomes broken.
This is my snow.php (I got it from Falling Snow Effect)
CSS:
#snowflakeContainer
{
position: absolute;
left: 0px;
top: 0px;
}
.snowflake
{
padding-left: 15px;
font-family: Cambria, Georgia, serif;
font-size: 14px;
line-height: 24px;
position: fixed;
color: #FFFFFF;
user-select: none;
z-index: 1000;
}
.snowflake:hover
{
cursor: default;
}
This is my HTML codes
<!-- div for snow -->
<div id="snowflakeContainer">
<p class="snowflake">*</p>
</div>
<!-- Javascript for snow -->
<script src="http://www.kirupa.com/js/fallingsnow_v6.js"></script>
<script src="http://www.kirupa.com/js/prefixfree.min.js"></script>
I need a help in inserting it in the website without template/page broken. Please guide me in what to do and what php file should I edit and insert this snow.php.
Hey guys I am having trouble styling my navigation so that is will always be at the same position on a page no matter the browser....
I have the following:
#Mainmenu {
width: 44%;
font-family: Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: .9em;
list-style: none;
position: absolute;
left: 35em;
top: 4.7em;
right: 0;
}
This is positioned, exacly where I want it in chrome and firefox but not in IE. Also if I change resolution it changes the positioning a little. I want to know how I can always have it at the same spot it is suppose to.
Let me know if you need anything else!
David
update:
http://jsfiddle.net/MVpkP/ - is the styles that I have in it and the layout.
The one above this is Chrome and the one I want it to remain like, that's how I want it styled.
Put this in your header
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE.css" />
<![endif]-->
Create an additional css file for IE and adjust your IE css accordingly.
you should either use % on your left/right/top, or put this element inside another element.
for example:
#Mainmenu {
width: 44%;
font-family: Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: .9em;
list-style: none;
position: absolute;
left: 3%;
top: 1.5%;
right: 0;
}
As for putting it in another element:
#wrap{
width: 700px;
margin:0 auto;
}
<div class="wrap">
your menu stuff...
</div>
either of those should solve your problem